搭建个人blog

搭建个人blog

  • January 22, 2020
目录

一直想写一个blog来记录自己的人生点点滴滴,之前一直忙于工作,最近稍微空闲下来了,于是开始着手这个事情。

为什么要搭建blog

  1. 对自己已经掌握的知识进行系统性地梳理、整理
  2. 分享,也许自己总结的知识正是别人需要的
  3. 记录自己的点滴,写 blog 有助于自己的思考

HUGO

HUGO是一个静态网站生成软件,用GO语言写成,据说是目前最快的静态blog生成工具了;

当然了,不仅仅是因为它快,用过Emacs的人都比较喜欢用orgmode来写文档,那么我写blog当然也想用能够支持Emacs orgmode的了,hugo现在已经提供了对Emacs orgmode的native支持;

不过后来发现hugo对Emacs orgmode还不能完全支持,不过还好还有ox-hugo,可以用来完美地将orgmode转成hugo支持的markdown格式的,很赞。

初始化blog

安装hugo

我用的是macOS,安装起来很简单

brew install hugo

新建blog

hugo new site blog
cd blog
git init
git add .
git commit -m "init project"

该命令会新建一个blog目录,并且初始化这个目录,站点所有的东西都会在这个目录下面。

选择主题

hugo thems 上面挑选一个喜欢的theme,然后安装,我选择的是 stack

cd blog/
git clone https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack
git submodule add https://github.com/vinurs/hugo-theme-stack/ themes/hugo-theme-stack

拷贝 hugo-theme-stack 主题下面的 exampleSite 里面的内容到 blog 目录下面

rm -rf config.toml
cp -rf themes/hugo-theme-stack/exampleSite/* ./

在blog目录下面生成站点

# 生成站点
hugo
# 本地预览
hugo server

这样本地可以通过 http://localhost:1313/ 这个来进行访问了,这样一个blog的雏形就搭建好了。

执行 hugo 以后会在blog/public下面生成可以发布的站点,后面我们只要把 public 下面的内容放到我们自己的github.io上面去就可以了。

GITHUB PAGE

由于我自己从事软件开发,因此我选择了大部分程序员的方式,通过 github page 来进行搭建。

发布

在github上面新建一个 用户名.github.io 的仓库,clone到本地,然后将我们上面的 public 里面的内容copy到这个仓库下面就可以了,最后再push到远程仓库。

git clone https://github.com/vinurs/vinurs.github.io.git
cp -rf blog/public/* vinurs.github.io/
cd vinurs.github.io
git add .
git ci -m "init the website"
git push

这时候我们就可以通过 https://vinurs.github.io 来进行访问了,第一次部署的时候可能需要等个一分钟才能访问。

自动化发布──github-actions

按照上面的发布过程,我们每次更新了文章以后都要执行上面一系列的操作,然后才能更新站点。

那么有没有一种方法能够自动执行上面的过程呢?这样我们就只需要关注写文章本身就可以了,答案就是 github actions

github page读取的是github.io的master分支,因此我们建立了一个 source 分支,clone到本地,删除掉里面的内容,然后将刚才blog目录下面的内容copy过去

git clone --branch=source https://github.com/vinurs/vinurs.github.io.git
cd vinurs.github.io
rm -rf *
git add .
git ci -m "delete published files"
git push
cd -
cp -rf blog/* vinurs.github.io

themes/hugo-theme-stack 我们是作为主题来单独维护的,因此作为一个submodule增加进去

cd vinurs.github.io
rm -rf themes
mkdir themes
git submodule add https://github.com/vinurs/hugo-theme-stack/ themes/hugo-theme-stack

public、resources里面的内容不需要提交,这个是每次自动生成的,因此我们增加了 .gitignore 文件来忽略这两个目录

ACTIONS_DEPLOY_KEY

想通过github来自动发布我们需要建立 ACTIONS_DEPLOY_KEY

生成一对 ssh key

ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""

将会得到两个文件:gh-pages.pub(公钥) 和 gh-pages(私钥),用文本编辑器打开可以看到文件的内容。 在 vinurs.github.io 项目主页中,找到 Repository Settings -> Secrets -> Actions 添加这个私钥的内容并命名为 ACTIONS_DEPLOY_KEY

vinurs.github.io 项目主页中,找到 Repository Settings -> Secrets -> Deploy Keys -> 添加这个公钥的内容,命名为 ACTIONS_DEPLOY_KEY ,并勾选 Allow write access

增加github workflows

参照这里的配置说明:https://github.com/peaceiris/actions-hugo

在项目的根目录下面新建对应的目录以及文件:

mkdir -p .github/workflows/
touch .github/workflows/main.yml

main.yml里面的文件内容如下:

name: github pages

on:
  push:
    branches:
    - source

jobs:
  build-deploy:
    runs-on: ubuntu-18.04

    steps:
    - uses: actions/checkout@master
    - name: Checkout submodules
      shell: bash
      run: |
        auth_header="$(git config --local --get http.https://github.com/.extraheader)"
        git submodule sync --recursive
        git -c "http.extraheader=$auth_header" -c protocol.version=2 submodule update --init --force --recursive --depth=1        

    - name: Setup Hugo
      uses: peaceiris/actions-hugo@v2
      with:
        hugo-version: 'latest'
        extended: true

    - name: Build
      run: hugo --gc --minify --cleanDestinationDir

    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
        publish_dir: ./public
        publish_branch: main # deploying branch

然后将刚才的内容推送到source分支上面去就可以了,我们可以通过 https://github.com/vinurs/vinurs.github.io/actions 这个页面来查看这个action执行的结果,一般是没什么问题的,有问题的话就google解决一下就可以,基本不会出现什么问题。

绑定自己的域名

github域名设定就是在根目录下面建一个 CNAME 文件,在hugo里面,我们只需要将原来的 CNAME 文件存放到 static 目录下面即可。

重新 clone

上面的是建立的过程,然后我们需要重新 clone 一下

git clone --recurse-submodules --branch=source https://github.com/vinurs/vinurs.github.io.git

更新历史

  • 2020-12-22
    • 初稿
comments powered by Disqus

相关文章

How to build an Application with modern Technology

How to build an Application with modern Technology

Nemo vel ad consectetur namut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.

阅读更多
How to build an Application with modern Technology

How to build an Application with modern Technology

Nemo vel ad consectetur namut rutrum ex, venenatis sollicitudin urna. Aliquam erat volutpat. Integer eu ipsum sem. Ut bibendum lacus vestibulum maximus suscipit. Quisque vitae nibh iaculis neque blandit euismod.

阅读更多
Blog 配置

Blog 配置

blog 的配置分为两种:hugo 相关配置、theme 相关配置。

阅读更多