缘由

一直以来都希望有个地方能够记录自己遇到的问题以及这些问题最后是怎么解决的,之前也做过一些尝试,不过最后都没有坚持下来。最近还是抑制不住这种想写点东西的冲动,于是又做了一次尝试,发现,这个过程其实没有之前那么痛苦了。这篇博客就是这次尝试的一个记录,也希望他可以帮助你,开始你的博客之旅。

搭建写作环境

现在通过markdown+github pages编写和搭建静态博客算是方便和廉价的解决方案。为了使用github pages来搭建静态博客,之前也学习过jeykll,也尝试过hexo,虽然最后都能用了,但是还是感觉环境的搭建比较麻烦,有些使用上也不太符合自己的习惯。无意中发现了hugo,初步使用之后,就毫不犹豫的换过来了。最主要的原因有两个:

  • 上手简单,一个命令搞定网页生成的所有事情;
  • 编写和上传博客的过程清晰、灵活、可控。

下面我具体的介绍下我的初步探索吧。

安装hugo

我平时使用的是MacBook,在MacBook上安装hugo可谓是极简,如下:

1
$ brew install hugo

一条命令就能安装好,从此再没有依赖问题。与jekyll和hexo相比,在写作环境的搭建上,hugo把入门的难度又拉低了一个门槛。如果你的系统上还不能使用Homebrew,请参考它的官方文档进行安装配置。

初始化git仓库

首先登陆github,通过面板创建一个名为ljjjustin.xyz的git仓库。创建好之后,我们clone到本地,添加README.md.gitignore。如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
$ git clone git@github.com:ljjjustin/ljjjustin.xyz.git
$ cd ljjjustin.xyz
$ cat .gitignore

# Folder view configuration files
.DS_Store
Desktop.ini

# Thumbnail cache files
._*
Thumbs.db

# blog public contents
public/
themes/

$ cat README.md
my personal [blog](https://ljjjustin.xyz) source files.

完成之后,我们进行提交,并将这些内容推送到ljjjustin.xyz仓库的master分支。

1
2
3
$ git add README.md .gitignore
$ git commit -m "Initial commit"
$ git push -u origin master

master分支主要是用来存放博客的源码,为了发布到网上,我们还需要创建一个名为ljjjustin.github.io的仓库,来存放hugo生成的网页,也是别人通过浏览器看到的网页。通过面板创建好之后,我们添加一个名为CNAME的文件,用来设置我们自定义的域名。

1
2
3
4
5
6
7
$ cd ljjjustin.xyz
$ git clone git@github.com:ljjjustin/ljjjustin.github.io.git public
$ cat CNAME
ljjjustin.xyz
$ git add -A
$ git commit -m "add CNAME config"
$ git push -u origin master

到这里,我们已经完成了git仓库的初始化,ljjjustin.xyz用来存放博客源码,ljjjustin.github.io用来存放生成的网页。初始化完成之后,接下来就要对博客网站做些全局的初始化了。

配置博客网站

首先,我们通过hugo生成一个博客网站,然后根据我们的需要对其配置进行修改。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
$ cd ../ljjjustin.xyz
$ hugo new site ljjjustin.xyz --force  # 最好的--fource不能少
$ tree -L 1
.
├── README.md
├── archetypes
├── config.toml # 整个博客的配置文件
├── content     # 存放博客的源文件,主要是Markdown格式
├── data        # 暂不明确
├── layouts     # 存放布局配置文件
├── public      # 存放hugo生成的网页
├── static      # 存放静态文件,如图片、css
└── themes      # 存放主题模板

为了是博客更加美观,可以指定别人设计的主题。这里我选择了比较简洁的hugo-geo,命令如下:

1
2
$ cd themes/
$ git clone https://github.com/alexurquhart/hugo-geo

下载好主题之后,我们开始修改博客的全局配置。修改config.toml,使其内容如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
baseurl = "https://ljjjustin.xyz/"
title = "我的探索和发现之旅"
languageCode = "zh-CN"
canonifyurls = true
disqusShortname = "ljjjustin"
theme = "hugo-geo"
paginate = 5

[permalinks]
    post= "/:year/:month/:day/:filename"

[taxonomies]
	tag = "tags"

[params]
	showglobe = true

        highlight = true

	github = "https://github.com/ljjjustin"
	twitter = "https://twitter.com/ljjjustin"
	linkedin = "https://linkedin.com/profile/view?id=5a203825"
	email = "iamljj@gmail.com"

	profilepic = "images/logo.jpeg"

	title = "Jiajun Liu"
	subtitle = "Software Engineer"

	[[params.navlinks]]
	name = "About"
	url = "about/"

	[[params.navlinks]]
	name = "Blog"
	url = ""

修改完成之后,找张自己的头像,并将其名字修改为logo.jpeg(和配置文件保持一致即可),并将其存放到static/images目录下。 这样我们就完成了这个博客的配置,最后把所有的修改保存,然后推送到master分支即可。

1
2
3
4
$ cd ljjjustin.xyz
$ git add -A
$ git commit -m "config blog site"
$ git push -u origin master

开始写博客

博客网站配置完成之后,我们就可以开始写博客了。如下:

1
2
3
4
5
6
7
8
$ hugo new post/start-my-blog-journey.md
/xxx/ljjjustin.xyz/content/post/start-my-blog-journey.md created
$ head -6 /xxx/ljjjustin.xyz/content/post/start-my-blog-journey.md
+++
date = "2016-08-26T15:18:12+08:00"
draft = true
title = "start my blog journey"
+++

然后你安装Markdown格式往里面填充内容即可。编写完成之后,可以通过下面的命令来生成网页,并通过浏览器进行预览。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
$ hugo server --watch --buildDrafts
Started building site
1 of 1 draft rendered
0 future content
1 pages created
0 non-page files copied
1 paginator pages created
0 categories created
0 tags created
in 61 ms
Watching for changes in /xxx/ljjjustin.xyz/{data,content,layouts,static,themes}
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

看到上面的命令行,打开浏览器,输入http://localhost:1313就可以对博客进行预览了。如果有需要改动的地方,重复这个步骤,直到你对博客满意为止。

发布博客

首先需要通过下面的命令将博客标记为可以正式发布的文章

1
$ hugo undraft content/post/start-my-blog-journey.md

除了使用上面的命令,也可以手动修改,将文章头部的draft = true改为draft = false。默认情况下,hugo会将文章标记为draft,也就是说,还没有准备好发布;这样可以避免把还没有完成的博客发布出去。 修改完成之后,我们可以通过hugo重新生成网页,生成完推送到ljjjustin.github.io上。

1
2
3
4
5
$ hugo
$ cd public
$ git add -A
$ git commit -m "update site at 2016-08-26"
$ git push origin master

推送到github之后,基本上过10分钟,别人就能看到你的博客了。

参考资料