• 使用 GitHub Pages 预览 HTML 的进阶
  • Go语言实现
  • 最快的博客生成器
  • 时常 更新（写文章）
  • 偶尔 修改（纠错，补充）
  • 总是 备份
  • 不应囿于语言
  • 迟早会学多种语言
  • 关注领域，而不只关注语言

这是我的博客

1.快速搭建Hugo

1.安装：

到Mac：

1

brew install hugo

到Win：

  1. 去gohugoio/hugo下hugo_***_Windows-64bit.zip
  2. 将解压的hugo.exe放到软件目录，并添加PATH
  3. 重启终端，运行hugo --version，看到显示版本号就说明安装成功

进入Hugo官网 ，或直接Quick Start，参照Step 2 ~ Step 7：

2.新建一个文档目录x，当前目录下使用命令行（Cmder Here…）：

1

hugo new site yourName #Step 2: Create a New Site in a folder named yourName.github.io-generator

用VSCode打开：

1

code yourName.github.io-generator/

或用终端：

1

cd yourName.github.io-generator/

3.初始化，下载默认主题ananke：

1
2
3

git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml  # Step 3: Add a Theme called ananke

4.创建新文章（content/posts）：

1
2

hugo new posts/my-first-postXXXX.md  #Step 4: Add Some Content
hugo new posts/开博大吉.md
  • hugo v0.59.1+已经修复：themes/ananke/theme.toml/里 min_version = "0.30.2"没加引号的bug
  • 编辑XXXX.md，注意名字XXXX间不能有空格，可以用-/_来连接；
1
2
3
4
5
6
7


---
title: "开博大吉"
date: 2019-12-10T22:18:37+08:00
draft: true
---
  • date的时间必须早于现在，才能显示出来
  • 编辑完成后，预览一下，将draft里的 true改为false，才可见

5.运行Hugo服务器

1

hugo server -D  # Step 5: Start the Hugo server, Now, start the Hugo server with drafts enabled...
  • 先别Press Ctrl+C to stop，点击进入链接：http://localhost:1313/ (bind address 127.0.0.1)
  • 打开浏览器，检查元素，查看手机适配，本地预览ok
  • 如果手快Press Ctrl+C，或者重设了配置文件，重新hugo server -D一下即可

6.设置主题配置文件（url有坑）

  • 打开VSCode，Ctrl + p，搜“config.toml”，打开
  • 将languageCode = "en-us"，改成："zh-Hans"（简体中文）
  • 修改标题：title = "你的标题"

7.生成public目录

  • 勿关闭终端（否则就不能访问之前设置的博客网页了）
  • 新建一个终端，然后运行：
1

hugo
  • 得到一个public目录，即博客站点
  • 在资源管理器中打开public目录，双击打开public/index.html不可预览（由于没有样式，不使用文件协议预览），只能使用hugo server进行预览

至此，走完了教程，本地初步设置完毕，官方教程默认你会发布博客，没有教任何后续操作，小白我不会，你的博客仍未发布到GitHub上

  • 预览草稿：hugo server -D
  • 预览非草稿：hugo server
  • 一个坑： config.toml里的第一行：baseURL = "...." “…“要填你的博客地址https://yourName.github.io/；Ctrl + c关闭hugo server;再重新运行hugo；

2.发布到GitHub Pages上

第1步：紧接着之前（博客生成器目录里：xxx.github.io-generator/），新建.gitignore，写上/public/

1
2

touch .gitignore
echo '/public/' >> .gitignore

外部仓库忽略public目录，public要自成一个仓库

第2步：进入public目录，并初始化-本地提交一条龙：

1
2
3
4

cd public
git init
git add .
git commit -m "第一次部署"

第3步：GitHub新建仓库

  • Repository name必须是：你的用户名.github.io
  • 复用会覆盖掉之前的，所以做好备份

GitHub新建仓库一条龙，举栗子：

1
2

git remote add origin git@github.com:yourName/yourRepoName.github.io.git
git push -u origin master

我的：

1
2

git remote add origin git@github.com:xmasuhai/xmasuhai.github.io.git
git push -u origin master
  • 记住：只把public上传到单独的git仓库就行了
  • 生成的public目录本质上就是使用 GitHub Pages 预览 HTML ，只不过小白不用自己去编辑HTML以及CSS，只要会markdown
  • 以后修改只要git push到GitHub Pages上就行了

第4步：最重要的操作：Settings

  • 确保GitHub Pages下Source在master branch上就行了，如果没有，选到master按钮

第5步：点击链接，我的是https://xmasuhai.github.io/，就能访问博客了

回顾

  1. hugo
  2. 搞出xxx.github.io-generator/
  3. 搞出public
  4. 在.gitignore里写上/public/
  5. public自成一派，上传GitHub仓库：用户名.github.io
  6. Setting>GitHub Pages

3.修改了博客文章和配置后（增删改查）

Ctrl + c 关闭hugo server，再打开hugo：

1
2
3
4
5
6

cd public
git add .
git commit -v
...
git push

hugo自动将content目录下posts里你写的markdown博客，生成对应的静态HTML到/public/目录下

4.备份博客生成器的本地仓库

  • creator或者generator和public是两个互相嵌套且忽略的不同的本地仓库

  • 1.新建GitHub new repo：yourName.github.io-generator

  • 2.删掉下载的主题文件里的.git

1

rm -rf themes/***/.git

或者gitignore掉

  • 3.上传git 远程仓库一条龙
1
2

git remote add origin git@github.com:yourName/yourName.github.io-generator.git
git push -u origin master

不需要生成子仓库

  • 4.备份完成，你可以不用担心public被删除，你只要能下载博客生成器仓库，就可以用hugo重新生成public目录，万无一失

5.小结

  • 博客md文件名不可包含非法字符，和win文件名命名规则一样
  • 写完博客，检查有没有把draft的状态改为false
  • 然后再cd到hugo博客生成器目录(xxx.github.io-generator）
  • 重启hugo一下，自动将content目录下posts里你写的markdown博客生成对应的静态HTML放到/public/目录下
  • git上传一条龙
  • 本地访问需要开着hugo server实时预览
  • 和 hugo server -D 的区别是后者会把draft状态为true的博客也展示出来，其他我就不知道了
  • 墨菲定律的告诫：要备份儿

6.自学编程的正确姿势

  1. 设定一个目标（在GitHub上写博客）
  2. 开始干
  3. 发现要学什么，就去学什么（命令行/git本地仓库/git远程仓库 markdown/VSCode使用）

P.S

如何在 Hugo 里插入图片

  • 视频里没有录制怎么在博客里插入图片，这里用文字说一下：
  1. 将图片文件 1.png 存放到 static 目录里，得到 static/1.png
  2. 在博客 Markdown 里写 ![](/1.png)就能看到 static/1.png 对应的图片了
  3. 如果你想在 static 里创建 images 目录，直接创建就好，对应的图片前面加上 /images 即可，比如
    • 将图片文件 2.png 放到 static/images 目录里，得到 static/images/2.png
    • 在博客里写 ![](/images/2.png)即可
  4. 推荐使用 static/images 来存放图片，这样更有条理。
  5. 推荐使用 VSCode 的拖放功能存入图片。
  6. 另外，如果你不会插入图片，就不知道谷歌一下「Hugo 插入图片」找找答案吗？

添加 .gitignore 文件

  • 在 Hugo 本地编译时会产生 public 文件夹，但是这个文件夹中的内容对于 Blog 仓库来说是不需要的 (包括用来存放主题的 themes 文件夹和主题产生的 resources 文件夹也是不需要的)

  • 可以用一个.gitignore 文件来排除这些内容

  • 在 Blog 目录下创建并修改 .gitignore

1
2
3

public/*
themes/*
resources/*

然后提交到 GitHub

参考文章

  • 无

相关文章

  • 无
  • 作者： Joel
  • 文章链接：
  • 版权声明
  • 非自由转载-非商用-非衍生-保持署名
  • 河 掘 思 知 简