Developments8 分钟 读完 (大约 1261 个字)

[NOTE] Hugo + Github Pages个人博客搭建

回顾之前的学习经历，学习的知识与技术都不够透彻，解决过的问题再一次出现时往往又会难倒我，也正逢一个新的阶段，于是便决定搭建一个个人博客，对知识进行归类，深化知识脉络。

Go环境配置

安装包是从Golang官网( https://golang.org )上下载的go1.12.6.windows-and64.msi安装包，安装比较傻瓜，值得注意的是有关go的几个环境变量：

  • GOROOT为go所安装的具体位置，将之添加到系统环境变量中，windows系统还需要在path中新增$GOROOT/bin
  • GOPATH可以理解为工作目录，默认为$USERNAME/go中，我将之调整到了D://go_work中，备忘
  • GOPATH目录下按照约定，将
    • bin文件夹用作存放golang编译的可执行文件
    • pkg用作存放golang编译时产生的.a文件
    • src用作存放项目的源码，同时，go run与go install等命令也在该目录中执行

安装golang的目的本来是为了直接编译hugo的源码，但遇到几个问题，git clone https://github.com/gohugoio/hugo.git速度奇慢，使用多个方法都没能解决 ，好不容易将整个源码下好之后，使用go install命令编译安装hugo时，又一次被网络环境给支配了，酸酸乳的没用。

无奈，只好下载适配的zip包解压安装。

hugo安装

接前言，

step by step

  • 解压文件到指定目录后，将./hugo/bin添加到path中，此时hugo目录中包括bin、resource、sites三个文件夹，没有就补上

  • hugo new site test-pages，会出现第四个文件夹test-pages

  • 此时还是一张白纸，既然要快速部署，就直接在https://themes.gohugo.io寻找自己喜欢的主题

  • 在test-pages/themes目录下clone对应主题，照抄hugo/test-pages/themes/xxxxx/下的配置文件config.toml，顺便解释下hogo/test_pages目录下的几个文件夹的作用

    • config.toml为网站的配置文件，config.yaml``config.json也是支持的

    • ./content/post存放你写的md文件，content文件夹中会生成一个about.md文件，如下

      1
      2
      3
      4
      5
      6
      7
      8
      9
      ---
      title: About Hugo   // 标题
      date: 2014-04-09	// 创建日期
      authorbox: false	// 
      sidebar: false
      menu: main			// 页面是否加入到侧边栏
      cover:				// 封面图地址
      tags:["Hugo"]		// 标签
      ---

    • ./archetypes/default.md可以预设文章的模板，在新建的文章中会生效

    • ./data目录存放数据

    • ./layouts存放网站模板

    • ./static目录存放图片，最好已文章名分别存放图片，方便管理

  • 将themes中主题的content文件夹中的内容放至./hugo/content/中，使用hugo server进行预览，在http://localhost:1313/中进行查看

Github Pages部署

step by step

  • new repository fusidic.github.io
  • 使用hugo -t mainroad(意味着使用主题mainroad对md文件进行打包到public文件夹中)，再将hugo/test_pages/public中的内容上传
  • https://fusidic.github.io 上传时遇到了一个404的bug，提示没有index.html，可以等10~60分钟，或在网址后加个?可以解决

使用

hugo新增

在test_pages目录下，使用hugo new post/xxxx.md新增一个文本到content/post中，md的文件首部是关于

快速部署

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
#!/bin/bash
# 部署到 github pages 脚本
# 错误时终止脚本
set -e

# 删除打包文件夹
rm -rf public

# 打包。even 是主题
hugo -t even # if using a theme, replace with `hugo -t <YOURTHEME>`

# 进入打包文件夹
cd public

# Add changes to git.

git init
git add -A

# Commit changes.
msg="building site `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"

# 推送到github  
# nusr.github.io 只能使用 master分支
git push -f git@github.com:nusr/nusr.github.io.git master

# 回到原文件夹
cd ..

遇到的一些问题

  • 首先遇到的一个问题，文章的summarize因为没有了富文本的渲染，在首页显得十分丑，官方文档中说得十分详细，奈何没有相关的处理经验根本不知道在讲什么，参照这篇博客终于有了大致的了解，在官方论坛的这篇帖子上同样有人遇到了相同的问题，评论给出的几个解决的方向之后再研究吧…

    针对上述问题，中文环境下在config.toml中添加hasCJKLanguage = ture可以使summarize发挥更好的效果，使用<!--more-->可以自定义summarize的截止。

反思之前的学习，对一些技术和知识的掌握始终不彻底，已经做过的一些东西经常会随时间遗忘。现今也算是处在一个新的阶段，有些东西不能再得过且过，于是便萌生了写博客的想法。

#

最新文章

×