前言:
做为一枚立志成为武林高手的程序员,怎么可以没有属于自己的一片园子呢。
一直想搭建一个博客,但是始终没开始搞。近期没事,今天必须把这个事儿搞定。
HEXO+Github 快速、简洁且高效的博客框架
Jekyll+GitHub 将纯文本转换为静态博客网站
FarBox The Best Blog Platform for Humans
Hugo Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。
用过HEXO的部分人,现在都转用Jekyll。
用过Jekyll的人呢,现在又转用FarBox。
还有些用过Jekyll的兄弟们,现在转用Hugo
FarBox
是需要自己掏点腰包,对于我个屌丝来说。暂不考虑。
那对于Hugo
,是我最佳选择。
如果有兄弟想将Jekyll
的文章迁移到Hugo
,Hugo
可以一键迁移Jekyll。
快速开始
使用默认的Ananke皮肤创建一个Hugo站点
在这个示例中使用
macOS
系统, 其它系统怎么进行快速开始,看安装
您还需要安装Git才能运行本教程。
第一步 导入Hugo
brew install hugo
验证您Hugo安装成功:
hugo version
第二步 创建一个新站点
在名为quickstart的文件夹中创建一个新的Hugo站点。
quickstart
站点名字(建议起名字为yourName.com)
hugo new site quickstart
第三步 添加一个皮肤
请参阅themes.gohugo.io以查看需要考虑的主题列表。 这个快速启动使用美丽的Ananke皮肤。
cd quickstart;\
git init;\
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke;\
$ la themes/ananke #看下ananke库
total 48
-rw-r--r-- 1 hunter staff 41B Jul 31 23:40 .git
-rw-r--r-- 1 hunter staff 331B Jul 31 23:40 .gitignore
-rwxr-xr-x 1 hunter staff 1.0K Jul 31 23:40 LICENSE.md
-rw-r--r-- 1 hunter staff 4.0K Jul 31 23:40 README.md
drwxr-xr-x 3 hunter staff 102B Jul 31 23:40 archetypes
drwxr-xr-x 5 hunter staff 170B Jul 31 23:40 exampleSite
drwxr-xr-x 4 hunter staff 136B Jul 31 23:40 images
drwxr-xr-x 10 hunter staff 340B Jul 31 23:40 layouts
-rwxr-xr-x 1 hunter staff 500B Jul 31 23:40 package.json
drwxr-xr-x 8 hunter staff 272B Jul 31 23:40 src
drwxr-xr-x 4 hunter staff 136B Jul 31 23:40 static
-rwxr-xr-x 1 hunter staff 521B Jul 31 23:40 theme.toml
注意看:
ananke
目录下有个示例站点exampleSite
。我们用人家的库,当然得按人家的示例来操作。
在下面,第四步 装饰你的站点 直接把示例站点中的static
、content
文件夹和config.toml
文件,与自己站点中的static
,content
文件夹,和config.toml
文件进行替换。
static文件夹:存放图片
content文件夹:存文章(xxxx.md)
第四步 装饰你的站点
cp -R /Users/hunter/HaiTeng-Wang.com/themes/ananke/exampleSite/static ./
cp -R /Users/hunter/HaiTeng-Wang.com/themes/ananke/exampleSite/content ./
cp /Users/hunter/HaiTeng-Wang.com/themes/ananke/exampleSite/config.toml ./
关于cp
,命令这里不多说。
你可以用命令行,将ananke
的示例站点exampleSite
下的文件,替换成自己的站点文件。当然,如果你愿意,可以手动替换。
替换完毕后,你的站点下的static
、content
文件夹终于不是空的了。
你的配置文件config.toml
可不再只有几行命令,而是这样
title = "Notre-Dame de Paris"
baseURL = "https://example.com"
languageCode = "en-us"
theme = "gohugo-theme-ananke"
themesDir = "../.."
MetaDataFormat = "yaml"
DefaultContentLanguage = "en"
SectionPagesMenu = "main"
Paginate = 3 # this is set low for demonstrating with dummy content. Set to a higher number
googleAnalytics = ""
enableRobotsTXT = true
[sitemap]
changefreq = "monthly"
priority = 0.5
filename = "sitemap.xml"
[params]
description = "The last theme you'll ever need. Maybe."
facebook = ""
twitter = "https://twitter.com/GoHugoIO"
instagram = ""
youtube = ""
# choose a background color from any on this page: http://tachyons.io/docs/themes/skins/ and preface it with "bg-"
background_color_class = "bg-black"
featured_image = "/images/gohugo-default-sample-hero-image.jpg"
注意:
你需要删除这行: themesDir = "../.."
你需要查看你的theme,theme = "ananke"
然后,在你的站点根目录执行 Hugo 命令进行调试:
hugo server -D
浏览器里打开:http://localhost:1313
目前为止: 你的站点已经创建完毕。
关于装饰你的站点,自己随便改一改站点下的static
、content
文件,和config.toml
配置文件看看发生了什么改变。
第五步 部署 Host on GitHub
如果你需要部署在 GitHub Pages 上。
首先在GitHub上创建一个Repository,命名为:coderzh.github.io (coderzh替换为你的github用户名)。
然后修改config.toml
publishDir = "docs"
baseURL = "https://haiteng-wang.github.io/"
然后,在你的站点根目录执行 Hugo 命令进行调试:
hugo
$ la
你会发现你的站点下多了个docs
文件夹
-rw-r--r--@ 1 hunter staff 6.0K Aug 1 01:12 .DS_Store
drwxr-xr-x 12 hunter staff 408B Aug 1 01:17 .git
-rw-r--r-- 1 hunter staff 108B Jul 31 23:40 .gitmodules
drwxr-xr-x 2 hunter staff 68B Jul 31 23:38 archetypes
-rw-r--r-- 1 hunter staff 838B Aug 1 01:16 config.toml
drwxr-xr-x 8 hunter staff 272B Jul 31 21:55 content
drwxr-xr-x 2 hunter staff 68B Jul 31 23:38 data
drwxr-xr-x 15 hunter staff 510B Aug 1 01:17 docs
drwxr-xr-x 2 hunter staff 68B Jul 31 23:38 layouts
drwxr-xr-x 4 hunter staff 136B Aug 1 01:12 static
drwxr-xr-x 4 hunter staff 136B Jul 31 23:44 themes
然后继续在你的站点根目录执行git 命令,添加远程仓库。
git remote add origin https://github.com/coderzh/coderzh.github.io.git
git add -A
git commit -m "first commit"
git push -u origin master
然后设置你的github-pages
点击生成的url看看博客是不是已经生成好了,注意如果没生成好,你可以查看站点下的URL是否对应
baseURL = "https://haiteng-wang.github.io/HaiTeng-Wang.github.io-/"
若没有对应,你需要修改你站点下的baseURL。
以下步骤以后修改站点内容,同样的操作。
修改config.toml文件
baseURL = "https://haiteng-wang.github.io/HaiTeng-Wang.github.io-/"
然后在站点根目录执行Hugo
命令
Hugo
接下来执行git命令
git add .
git commit -m "fix:BaseUrl"
git push
好了,再来查看你的博客地址https://haiteng-wang.github.io是不是生成好了?
(文章语言,没有采用中性词语,且很多大白话。半夜两点了实在困傻了。原谅我没有好好整理。)
后续:
如果成功生成GitHub Pages,但是生成后是这样的
那我们就直这样喽
$ cd docs
$ git init
$ git remote add origin https://github.com/coderzh/coderzh.github.io.git
$ git add -A
$ git commit -m "first commit"
$ git push -u origin master
如果,您发现文章中,有待梳理,写的不清除的地方,或有更好的补充建议。欢迎评论我,或联系我。