目录

使用github.io和hugo建立博客

这篇文章介绍如何使用 github.io 和 hugo 建立个人博客。

github.io是Github免费提供的Pages服务,可发布静态页面,建立个人博客。

hugo是Go编写的静态网站生成器,可将Markdown文件渲染为静态网页内容,非常适合博客、文档等网站的生成。

github.io

新建public仓库,可在设置中选择发布,Settings->Pages->Deploy from a branch,选择分支和路径。github支持根目录和/docs目录。

名为USERNAME.github.io的repo可通过https://USERNAME.github.io/访问,其他名称的repo通过https://USERNAME.github.io/<repo_name>访问。

hugo

下载extend版本的hugo

1
2
3
4
5
6
hugo [subcmd] -h    # help

hugo new site mysite
cd mysite
hugo server
# Web Server is available at http://localhost:1313/

由于没有任何页面,访问会出现Page Not Found

添加theme:

1
2
3
4
5
hugo new theme mytheme
echo theme = 'mytheme' >> hugo.toml
hugo new content xxx.md    # 在content子目录下创建md文件, 自动添加front-matter
hugo server                # 开启本地服务器
hugo -D                    # 在public目录生成静态页面, -D即包含标为draft的文档

可访问hugo官网下载现成的theme

新版hugo默认配置文件为hugo.toml,删掉此文件则可依旧使用config.toml

  • 配置项有些是hugo通用(由hugo使用),有些是各个主题特有(在主题的模板文件中使用)

beautiful-hugo

beautiful-hugo界面类似beautiful-jekyll。

按需修改config.toml。比如给代码块添加行号,修改静态页面导出目录等:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
publishDir = "docs"    # 修改导出目录
[markup]
  [markup.highlight]
    codeFences = true
    guessSyntax = true
    hl_Lines = ""
    lineNoStart = 1
    lineNos = true
    lineNumbersInTable = false
    noClasses = true
    style = "github"
    tabWidth = 4

markdown文档中,<!--more-->标签之前的内容默认作为文章摘要。

repo配置

如果出于某些考虑,比如不愿意公开md文件,只想发布纯粹的静态页面,可参照此方式。其他主题类似。

创建名为blog_gen的私有仓库。创建名为USERNAME.github.io的仓库,设为存放静态页面的公开仓库。

1
2
3
4
5
git clone git@github.com:USERNAME/blog_gen.git
hugo new site blog_gen --force
cd blog_gen
git submodule add https://github.com/halogenica/beautifulhugo.git themes/beautifulhugo
# cp -r themes/beautifulhugo/exampleSite/* . -iv

添加ctrl.bat文件:

 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
@echo off

set arg=%1
set blog=docs
set username=sulpc
set reponame=%username%.github.io

if "%arg%"=="prepare" (
    if exist %blog% (
        echo %blog% exsit, delete it
        rm -rf %blog%
    ) else (
        echo %blog% not exsited
    )
    git submodule init
    git submodule update
    git clone git@github.com:%username%/%reponame%.git %blog%
) else if "%arg%"=="commit" (
    cd %blog%
    rm -rf *
    cd ..

    hugo -D
    cd %blog%
    git add .
    git commit -m x
    git push
    echo %blog% pushed done
    cd ..

    git add .
    git commit -m x
    git push
    echo all pushed done
) else (
    echo usage: ctrl.bat prepare/commit
)

从git上拉取到本地后,先执行ctrl prepare,将public目录与USERNAME.github.io关联。本地添加完文章,没有问题执行ctrl commit将修改推入git。

jekyllrb

jekyllrb和Hugo均为静态页面生成器,使用md编写网页。本地运行Jekyll需要Ruby环境,未尝试。

beautiful-jekyll

beautiful-jekyll项目fork该项目到自己的仓库,命名为USERNAME.github.io,简单配置。

添加markdown后push上去即可访问。比其hugo反而更简单一些。