github+Typora博客搭建方案

环境

• 平台：github pages
• 框架：hugo
• 主题：LoveIt
• 编辑器：Typora

搭建记录

本地安装hugo

• Hugo需要先安装Go语言环境。

• 在官方github仓库下载对应操作系统的Hugo的zip包。

• 将下载好的zip包解压到Go安装目录的bin目录下。

• Hugo 提供了一个 new 命令来创建一个新的网站：

  1 2	hugo new site my_website cd my_website

导入主题

• github上下载最新版LoveIt主题：Github/Loveit

• 下载好的zip包解压到my_website下的themes目录。

  注意

  config.toml里的theme参数要和主题目录的名称一致，否则在构建网站时会报错。

配置网站

• 编写my_website下的config.tmol文件。
• 可以参考官方给出的例子：LoveIt配置示例

构建本地网站

1
2

hugo serve --disableFastRender
# --disableFastRender可以通过hugo的.Scratch来实现实时预览文章效果

• 通过localhost:1313可以访问本地搭建的网站。
• 当修改文件时，网站会自动进行更新。

导入博文

• 博文的源文件在my_website下的content/posts。

• 可以在文章的内容前面加上yaml格式或json格式的元数据参数：

  1 2 3 4 5 6 7 8 9 10 11

  # 常用 --- title: "文章标题" date: 2021-02-03T00:00:00+08:00 draft: false (是否为草稿，如果在hugo serve中加入了参数--buildDrafts/-D，将决定此篇文章是否显示在主页) toc: true (是否启用目录) tags: ["blog"] (标签) categories: ["生活多美好"] (分类) lightgallery: true (是否启用lightgallery) --- 文章正文

图片链接

• 在assets目录下，每个文章都单独建立一个名为文章名.assets的文件夹用于放置图片。

• assets目录用于放置静态资源，在文章中引用的时候，可以以assets目录为根目录来引用。

• 在本地编辑文章时，我使用的是Typora，可以在软件中设置将图片复制到当前目录下的文章名.assets目录，这样转移到博客网站时，只需要批量修改下引用链接，在开头加上“/”就可以了。

  使用图床之后，不必再将本地图片目录上传至博客仓库。

推送到github

• 使用github pages来搭建hugo博客的原理是，在本地先使用hugo生成网站文件，再将包含网站文件的目录推送到github上。也就是hugo会将我们所有的源文件自动转换成网页。

• 先在源文件的根目录下执行hugo命令生成网站文件，网站文件输出的目录，可以在config.toml中配置“publishDir”参数。

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

  $ hugo Start building sites … | ZH-CN -------------------+-------- Pages | 82 Paginator pages | 1 Non-page files | 0 Static files | 94 Processed images | 0 Aliases | 22 Sitemaps | 1 Cleaned | 0 Total in 3026 ms

• 完成之后，根目录下会出现一个新目录，其中包含的就是我们转换后得到的网站文件。

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

  $ ls -l total 37 drwxr-xr-x 1 liuchong 197609 0 1月 31 19:58 archetypes/ drwxr-xr-x 1 liuchong 197609 0 2月 9 14:45 assets/ -rw-r--r-- 1 liuchong 197609 19 1月 31 19:58 CNAME -rw-r--r-- 1 liuchong 197609 16770 1月 31 19:58 config.toml drwxr-xr-x 1 liuchong 197609 0 1月 31 19:58 content/ drwxr-xr-x 1 liuchong 197609 0 8月 31 1754 docs/ <-- 这就是我们的网站文件目录 -rw-r--r-- 1 liuchong 197609 7169 1月 31 19:58 LICENSE drwxr-xr-x 1 liuchong 197609 0 1月 31 19:59 resources/ drwxr-xr-x 1 liuchong 197609 0 1月 31 19:58 static/ drwxr-xr-x 1 liuchong 197609 0 1月 31 19:58 themes/

• 现在我们就可以用git推送到自己的仓库啦。

  1 2 3

  $ git add * $ git commit -m "初始化网站" $ git push origin main

  注意

  由于我之前存在一个用于博客的仓库，所以可以直接将其下载到本地，附加上我们本次创建的文件再推送到仓库。如果没有的话，就需要自己先建立一个仓库。

• 进入github页面，在仓库的setting页面设置github pages。因为我的网站文件全部在“docs”目录下，所以我将网站的根目录也设置为“docs”。

  

• 最后配置好cname记录，就可以愉快地访问自己的网站了！

优化

配置cdn

• 对于国内访问github，还是不太稳定，最好的办法就是给网站配置一个好用的cdn。

• 鉴于国内各大厂商的服务费用和备案限制，决定还是试一试cloudflare的免费版加速。

• 注册cloudflare账号后，有非常详细的教程，一步一步教你如何设置。

  糟糕的解决方法

  cloudflare虽说有免费服务，其可用的节点基本也都在北美，而github的服务器也在北美，其实和没有加速是一样的。。

图床建设

• 考虑使用阿里云oss来搭建图床，较为便宜，对于国内访问来说，图片加载也更快，可以替代cdn。

搭建阿里云oss

• 参考了很多搭建博客的经验，除却七牛云与又拍云对于备案域名的需要，也除却个人图床的稳定隐患，还是选择了阿里云的oss。

• 阿里云oss的计费方式基本是存储+下行流量，由于没有免费存储空间，只能购买套餐，9元一年的40G空间套餐还是非常香的，至于下行流量，基本取决于网站的访问量，咱们小破站基本可以忽略了，如果真有大流量，再考虑流量套餐。

  推荐一个在线图片压缩网站

  博客上的图片总归是要压缩，不可能使用原图的，推荐docsmall，在线压缩，还算比较好用。

  

• 购买成功后，进入oss控制台，创建一个新的Bucket，这相当于创建一个新的存储空间。创建之后，就可以在页面中看到图床的域名前缀（后面配置PicGo会用到）

  

  

  

配置PicGo

• Typora支持使用PicGo上传图片，并提供了PicGo的下载链接，可以直接下载（可能会有些慢）

  

  为什么用PicGo App，而不是PicGo-Core

  PicGo-Core为软件的核心，以命令行形式运行，但是依赖Node.js环境。

  PicGo App已经编译为win32程序，可以单独运行，正常为图形化界面但支持命令行操作，图形化在上传博客以外的图片也更加方便。

• 趁着下载的工夫，我们可以来配置一下阿里云的AccessKey，稍后PicGo会使用这个Key来获得oss的访问和操作权限。

  

• 考虑到安全问题，进入管理界面后会推荐使用子用户AccessKey，防止主用户的密钥泄漏造成不必要的问题，同时也便于控制子用户的权限。

  

• 创建新用户，访问方式勾选“编程访问”，会生成访问密钥。

  

• 之后在用户信息页面，可以看到生成的AccessKey ID和AccessKey Secret（一定要复制下来，之后页面上就看不到了）

  

• 待PicGo安装好之后，可以开始配置图床信息了。重点在于必填项，除了刚才获取的密钥，还有存储空间名（就是Bucket）和存储区域（地区）。其余选项可以根据自己情况填写。

  

• 配置完成后点“确定”保存并设置为默认图床。可以尝试在Typora上传一个图片。如果成功，在oss页面会看到上传的图片。PicGo的配置到此完成。

  

脚本实现分目录上传图片

• 通过Typora调用PicGo来上传图片，由于在PicGo中设置的图片路径是固定的，表明我们所有博客的图片都将在相同的目录下，这样对于一位整理强迫症患者来说或许是不能容忍的，所以自己动动手，用脚本来实现图片分目录放置。

  信息

  得益于Typora支持自定义上传脚本，并且PicGo支持命令行执行上传。问题变得容易解决了许多。

• 脚本运行环境为bash（git自带），核心功能点如下：

  1. 获取图片归属的目录名：目录名应与博文同名，这里也要得益于Typora的自定义上传脚本可以使用${filename}变量，我们就将此变量作为参数传入脚本。
  2. 修改PicGo配置中的路径参数：PicGo的配置文件中有图床上传的路径参数，我们既然要实现指定目录上传，就要在每次上传之前都修改这个参数。
  3. 调用PicGo上传：PicGo支持命令行使用upload参数来上传图片，然而重点在于要将其返回的图片链接传回给Typora，才能在博文中正确地替换掉图片链接。

• 最终脚本实现如下:

  1 2 3 4 5 6 7 8 9 10 11

  #! /bin/bash # 脚本参数1：从Typora传入的文件名；参数2...：图片的本地绝对路径 conf="/c/Users/liuchong/AppData/Roaming/picgo/data.json" path="$(echo $* | awk '{print $1}')/" pics="$(echo $* | awk '{$1=""; print $0}')" # 修改PicGo配置中的路径值 sed -i /path/{"s|\:.*|\: \"$path\"|"} $conf # 这里调用PicGo之后，执行完不会自动结束进程，所以我们将调用放入后台，在上传图片并成功返回链接后，将进程结束（权宜之计）。 echo -n "$(/e/PicGo/PicGo.exe upload $pics | grep https)" & sleep 5 ps -ef | grep "PicGo" | awk '{print $2}' | xargs kill >> /dev/null

• 同时在Typora上设置自定义的上传脚本。

  

• 最后来试一下是否生效。

  

• 未完待续。。