• 使用 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
---
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
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


·未完待续·

参考文章

相关文章