使用hugo和github搭建博客

一、安装hugo

去hugo下载地址下载所需要的版本的hugo软件，如果是windows的就下载对应的压缩包，解压后得到hugo.exe，然后配置好环境变量，就可以在cmd中全局使用hugo命令。

二、创建本地博客目录

1
2
3


cd d:
hugo.exe new site sqian-blog
cd sqian-blog

上述三条命令分别是：进入到D盘目录，使用hugo创建一个博客目录，进入到该目录中。目录结构大概是：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


 ll
total 25
drwxr-xr-x 1 user 197121    0 8月  12 18:25 archetypes/
-rw-r--r-- 1 user 197121 4283 8月  14 09:42 config.toml
-rw-r--r-- 1 user 197121  842 8月  12 18:55 config.toml.casper
drwxr-xr-x 1 user 197121    0 8月  12 18:36 content/
drwxr-xr-x 1 user 197121    0 8月  12 18:25 data/
drwxr-xr-x 1 user 197121    0 8月  12 18:25 layouts/
drwxr-xr-x 1 user 197121    0 8月  31  1754 public/
-rw-r--r-- 1 user 197121   40 8月  12 19:24 README.md
drwxr-xr-x 1 user 197121    0 8月  12 18:28 resources/
drwxr-xr-x 1 user 197121    0 8月  12 18:25 static/
drwxr-xr-x 1 user 197121    0 8月  14 09:36 themes/

三、创建文章

1

hugo new about.md

上述命令使用hugo来创建一个名字为about.md的文章。执行完上述命令之后，在content目录下回生成该文件。

当然也可以给文章分类，创建到不同的目录中：

1

hugo new post/first.md

上述命令在content的post目录下，生成名字为first.md的文章。

打开上述md文件，编辑保存即可。

四、安装主题

hugo支持多种主题，在github上也有很多开源的主题可供使用。

本次我们选择一个简约的主题，地址为：https://github.com/xianmin/hugo-theme-jane

不同的主题安装过程大体都类似，比如安装上述主题的过程为：

git clone https://github.com/xianmin/hugo-theme-jane.git --depth=1 themes/jane

拷贝并编辑配置文件：

如果细心点会发现在我们创建的博客根目录下有个配置文件config.yaml，该配置文件根据不同的主题，配置项可能不同，我们直接从该主题中拷贝一个样本配置文件到博客根目录，然后根据需要修改：

cp themes/jane/exampleSite/config.toml ./

五、本地预览

上述我们编辑了我们的博客内容，修改了主题，需要现在本地预览，看是否有书写、格式错误，等待无误后再发布出去。

可以使用hugo在本地直接启动server来预览，命令如下：

hugo server --theme=hyde --buildDrafts

上述有两个参数：

--theme：指定渲染的主题；
--buildDrafts：使用hugo自动生成的md博客文件头中，都会有对应的draft参数，表示该文章还在编辑中。预览模式下我们期望的预览所有，所以加上该参数。如果我们博客编辑完成了，需要把改参数去掉，然后使用hugo编译，发布到github上。

hugo本地启动之后，就可以浏览器访问localhost:1313来预览效果，如果有问题，及时修改即可。

六、发布

上述我们在本地已经调试好了。如果将我们的博客发布到github上给别人看呢。这里需要普及的一个知识是，每一个github账户可以创建一个特殊的仓库：$username.github.io，创建好之后，我们可以通过浏览器访问地址:http://$username.github.io来访问主页。因此我们可以在该特殊的仓库中建立我们的博客站点。github Pages

假设我们创建好仓库https://github.com/qsyqian/qsyqian.github.io。进入到我们的站点根目录，编译生成站点：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


hugo --theme=jane
Building sites …
                   | EN
+------------------+----+
  Pages            | 13
  Paginator pages  |  0
  Non-page files   |  0
  Static files     | 19
  Processed images |  0
  Aliases          |  2
  Sitemaps         |  1
  Cleaned          |  0

Total in 188 ms

主题选项要选择自己已经安装好的主题。

编译好之后，在./public目录下会生成站点的静态文件，我们要做的就是把./public目录和我们在github创建的仓库连接起来：

1
2
3
4
5
6


$ cd public
$ git init
$ git remote add origin https://github.com/qsyqian/qsyqian.github.io.git
$ git add -A
$ git commit -m "first commit"
$ git push -u origin master

上述工作全部做完之后，大概过1-2分钟之后，访问自己的博客站点qsyqian.github.io就可以看到自己的博客站点啦。撒花~

七、换电脑了如何继续

一般上换了电脑之后，首先要clone我们的博客源文件代码仓库到本地，里面是我们写的博客的md文件的源文件；此外在该目录下clone我们的qsyqian.github.io仓库到该源码仓库的根目录下，并重命名为public。

然后就可以按照上述步骤新建博客，生成博客，发布博客了。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


# git clone git@github.com:qsyqian/blog.git
# cd blog
# git clone git@github.com:qsyqian/qsyqian.github.io.git
# mv qsyqian.github.io public
# hugo new post/xxx.md
# ....edit xxx.md....
# hugo server --theme=jane  #本地预览
# hugo --theme=jane  #编译博客
# 在blog目录下git add . && git commit && git push,源码文件要push到远程
# 在public目录下git add . && git commit && git push，生成的博客静态文件要push到远程

使用hugo搭建博客