Please enable Javascript to view the contents

搭建个人博客

 ·  ☕ 7 分钟  ·  🎅 Lurenxiao · 👀... 阅读

环境

  • Arch Linux ( Manjaro Linux)
  • Hugo
  • 1 G 的剩余空间

搭建

1
2

pacman -Syy
pacman -Syu hugo

前往hugo主题挑选一个你喜欢的主题，挑选好了之后进入它的homepage。这里我选择的是zzo主题，简洁的画风，近乎完善的功能，这就够了。

进入你想放置网站项目的地方

1
2
3

hugo new site [你的网站名]
cd [你的网站名]
git init

git clone [git clone https://github.com/zzossig/hugo-theme-zzo.git themes/zzo|你选择主题的git] themes/[zzo|你的主题名]

接下来要按照你主题的homepage指引配置，有些主题的配置区别与官方配置，例如我这个zzo主题，要求吧网站root下的config.toml删掉，在theme/zzo/example下新建一个config文件夹。

  • 一般配置，在 config.toml 里将 theme 改为 theme = “[主题名]” 即可把网站设置为你刚选择的主题（zzo改成你的主题名）

    1

    gedit config.toml

  • zzo配置

    1. 在theme/zzo/exampleSite下新建一个config文件夹，目录结构如下所示，注意default前有一个下划线，如果目录结构不对会报找不到配置文件的错

      1
2
3
4
5
6
7

      exampleSite
├── config
│   ├── _default
│   │   ├── config.toml
│   │   ├── languages.toml
│   │   ├── menus.en.toml
│   │   ├── params.toml

    2. 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

    baseURL = "http://example.org/"
title = "Hugo Zzo Theme"
theme = "zzo"
  
defaultContentLanguage = "en"
defaultContentLanguageInSubdir = true
hasCJKLanguage = true
  
summaryLength = 70
  
copyright = "©{year}, All Rights Reserved"
timeout = 10000
enableEmoji = true
paginate = 7
rssLimit = 100
  
[outputs]
  home = [ "HTML", "RSS", "JSON" ]
  
[taxonomies]
  category = "categories"
  tag = "tags"
  series = "series"
    1. languages.toml
    1
2
3
4
5
6
7
8
9

    [en]
  title = "Hugo Zzo Theme"
  languageName = "English"
  weight = 1
  
[ko]
  title = "Hugo Zzo Theme"
  languageName = "한국어"
  weight = 2

    1. menus.en.toml

      此处你可以自定义自己的menus

     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
37
38
39

    [[main]]
  identifier = "about"
  name = "about"
  url = "about"
  weight = 1
  
[[main]]
  identifier = "archive"
  name = "archive"
  url = "archive"
  weight = 2
  
[[main]]
  identifier = "gallery"
  name = "gallery"
  url = "gallery"
  weight = 3
      
[[main]]
  parent = "gallery"
  name = "cartoon"
  url = "gallery/cartoon"
  
[[main]]
  parent = "gallery"
  name = "photo"
  url = "gallery/photo"
  
[[main]]
  identifier = "posts"
  name = "posts"
  url = "posts"
  weight = 4
      
[[main]]
  identifier = "notes"
  name = "notes"
  url = "notes"
  weight = 5
    1. params.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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

    logoText = "Zzo"
description = "The Zzo theme for Hugo example site."
custom_css = []
custom_js = []
  
# header
homeHeaderType = "img" # text, img, slide
  
# body
enableBreadcrumb = true
enablePhotoSwipe = true
enableSearch = true
enableMark = true
enableGoToTop = true
enableWhoami = true
summaryShape = "card" # card, classic, compact
archiveGroupByDate = "2006" # "2006-01": group by month, "2006": group by year
archivePaginate = 20
paginateWindow = 1
  
# whoami
myname = ""
email = ""
whoami = ""
useGravatar = false
location = ""
organization = ""
link = ""
  
# sidebar
enableBio = true
enableSidebar = true
enableSidebarTags = true
enableSidebarSeries = true
enableSidebarCategories = true
enableToc = true
enableTocSwitch = true
itemsPerCategory = 5
enableSideSubscribe = false
searchLanguages = ['en'] # checkout lunr.js supported language
  
# comment
enableComment = false
disqus_shortname = ""
commento = false
  
# footer
showPoweredBy = true
showFeedLinks = true
showSocialLinks = true
enableLangChange = true
enableThemeChange = true
themeOptions = ["dark", "light", "hacker", "solarized", "custom"]
[socialOptions]
  email = "mailto:your@email.com"
  facebook = "http://example.org/"
  twitter = "http://example.org/"
  github = "http://example.org/"
  stack-overflow = ""
  instagram = ""
  google-plus = ""
  youtube = ""
  medium = ""
  tumblr = ""
  linkedin = ""
  pinterest = ""
  stack-exchange = ""

本地运行，进入themes/zzo/exampleSite目录

1

hugo server --themesDir ../..

打开浏览器看一下刚才搭建的博客，成功～

配置

复制exampleSite，改名为你的博客名，可以用cp拷贝到exampleSite同级目录下，也可以直接拷

1

cp -r exampleSite lurenxiao

配置自己的页面

做这个主题的是个韩国人，接着我们要把这个韩文版去掉，增加一个中文版，以下是目录结构

  1. params.zh.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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

    logoText = ""
description = "路人枭的博客."
custom_css = []
custom_js = []
   
# header
homeHeaderType = "img" # text, img, slide
   
# body
enableBreadcrumb = true
enablePhotoSwipe = true
enableSearch = true
enableMark = true
enableGoToTop = true
enableWhoami = true
summaryShape = "card" # card, classic, compact
archiveGroupByDate = "2006" # "2006-01": group by month, "2006": group by year
archivePaginate = 20
paginateWindow = 1
   
# whoami
myname = ""
email = ""
whoami = ""
useGravatar = false
location = ""
organization = ""
link = ""
   
# sidebar
enableBio = true
enableSidebar = true
enableSidebarTags = true
enableSidebarSeries = true
enableSidebarCategories = true
enableToc = true
enableTocSwitch = true
itemsPerCategory = 5
enableSideSubscribe = false
searchLanguages = ['zh'] # checkout lunr.js supported language
   
# comment
enableComment = false
disqus_shortname = ""
commento = false
   
# footer
showPoweredBy = true
showFeedLinks = true
showSocialLinks = true
enableLangChange = true
enableThemeChange = true
themeOptions = ["dark", "light", "hacker", "solarized", "custom"]
[socialOptions]
  email = "mailto:your@email.com"
  facebook = "http://example.org/"
  twitter = "http://example.org/"
  github = "http://example.org/"
  stack-overflow = ""
  instagram = ""
  google-plus = ""
  youtube = ""
  medium = ""
  tumblr = ""
  linkedin = ""
  pinterest = ""
  stack-exchange = ""

  2. menus.zh.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

    [[main]]
  identifier = "about"
  name = "关于"
  url = "about"
  weight = 1
   
[[main]]
  identifier = "gallery"
  name = "画廊"
  url = "gallery"
  weight = 3
       
[[main]]
  parent = "gallery"
  name = "卡通"
  url = "gallery/cartoon"
   
[[main]]
  parent = "gallery"
  name = "照片"
  url = "gallery/photo"
   
[[main]]
  identifier = "posts"
  name = "文章"
  url = "posts"
  weight = 4
       
[[main]]
  identifier = "notes"
  name = "笔记"
  url = "notes"
  weight = 5

你可以试着自己把.zh里的一些英文字符串改成中文，看是否适配

接着把content里的韩文后缀改成zh，以及把里边的韩文改成中文

写一篇博客

hugo的文章都放在content里，所以我们在content/posts里新建一个md文件，firstBlog.zh.md

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

---
title: "Hugo 1"
date: 2017-10-11T10:33:41+09:00
description: "Hugo 1 Description"
tags:
- hugo
series:
-
categories:
- 
---

title是你的标题名，description是贴在标题下的描述，tags是这篇博文的一些标签，你可以设置多个标签，多行- tag即可。series是系列，categories是类型，配置方法与tags一样。

然后你可以在下边写一点东西，如下图所示

保存，hugo会自动运行，用浏览器可以看到已经成功的写了你的第一篇博客

使用GitPages发布网站

写博客肯定还是要分享的，我们接下来用gitpage发布我们的博客

进入刚才运行网页的目录，即进入theme/zzo/[你的网站]

1

hugo --themesDir ../../

可以看到目录下多了一个/public文件夹出来，这个文件夹就是Hugo生成的静态网页。我们最终要将这些静态网页部署到一个地方，免费且稳定的GitHub Pages是一个很好的选择。具体操作如下：

  1. 在GitHub新建一个Repository命名为lurenxiao1998.github.io，其中lurenxiao1998改成自己的GitHub账户名；
  2. 在/mysite外建立一个平行的文件夹，此处假设也命名为/lurenxiao1998.github.io；
  3. 进入/public文件夹将内容复制到/lurenxiao1998.github.io；
  4. 将/lurenxiao1998.github.io的内容push到远程仓库。

以上命令可在命令行通过以下语句实现：

1
2
3
4
5
6

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

完成以上命令后，等待一分钟左右即可在 https://lurenxiao1998.github.io/ 访问你的网站。
push到远程仓库即可。也可将步骤写为Shell脚本，此处不再赘述。

使用自己的域名访问博客【可选】

首先你得拥有你自己的域名，我之前申请过一个阿里云域名，我们直接从域名解析开始，如果还没有域名的话，先去域名管理商申请一个。这里不赘述。

我们需要知道你的gitpage的ip，然后创建一个A记录和一个CNAME记录。

首先ping你的网站，可以看到你网站的ip

去阿里云首先得申请一个ssl证书，你才可以进行https访问，这个上网搜。

然后构建一个A记录和一个CNAME记录，你的gitpage可能会有多个ip，你可以多搭几个A记录，这里我只搭了一个

这里有个问题，如果只填写CNAME记录确实可以访问网站，但是无法通过https访问，好像是因为你先访问lurenxiao.com，这个证书上写的域名是lurenxiao.com，但最终你要访问的是gitpage，域名不是lurenxiao.com。所以要配一个A记录把域名直接绑定上ip，这个地方不是很懂。

进行完如上操作之后先别去访问www.lurenxiao.com。还需要在你的gitpage上添加一个CNMAE。你可以自己添加到public然后PUSH上去，一行就是你的域名

也可以在Settings里设置，github会自动帮你添加一个CNAME文件

这里比较推荐自己添加push上去，因为下一次你push的时候也因为github比本地多个文件发生冲突。

接下来你就可以通过域名访问你的博客了

分享
Lurenxiao
作者
Lurenxiao
学生