Skip to main content

Hello World

Ven2s...About 15 minCodeServerBlog

Build this site Hugo Blog 实战

+ 2022.02.11 add 侧边栏 鼠标指针 样式
+ 2022.01.26 Update autodeploy.yml 实现 Hugo Blog 源码github  gitee  gitlab三端同步 (可以没有 | 就很帅)
+ 2022.01.26 Done 😎
+ 2022.01.26 <争取一口气把剩下的内容填完> 并没有 | Markdown的排版比码字更费事 💦
+ 2022.01.24 简简单单的两个美化项目又变成了好几个      😥 😥 😥
+ 2022.01.23 前言 <写了一些废话>
+ 2022.01.20 萌生写下这篇文章的想法 并把大纲po在这里

闲言碎语

从信用卡聊到陈年往事

  • 前段时间,在老婆的支持下(“盗”刷老婆信用卡,orz),买了一个十年的域名,起初拿来也就无非是给服务器套个域名,加个SSL,反代一些需要用到的web工具。想着这个域名好歹也是千挑万选出来的(Sia刚好与老婆名字谐音,所以自然而然地在前面加个Luv不过分吧,2333),现在的朋友圈基本上也没咋发过东西,全都是一些工作上的琐事。不如开个博客,记录一下生活(主要是用着这么有内涵的域名,让老婆感受一下应有的尊重,还能升华彼此的感情,哈哈哈,扯远了),还可以把自己“搞机爱好”(折腾癖好)的过程记录下,把READMEopen in new window中所说的Ctrl+CCtrl+V变为自己的知识,而不是只会复制粘贴,成了一个工具人。让这项爱好不至于太肤浅,还能真正掌握一下基础的编程知识。

  • 这篇博客,主要是记录下整个Blog的搭建基本思路与部署过程,Blog完成Hello World之后,后续一直在跟进基础美化、插件适配的工作,所以这篇文章也就搁置如今。“简简单单”的~两个美化项目~,碍于能力有限,三天时间才完成80%,真tm惨...

  • 在刚接触到Blog搭建还是在近6年以前,也是搞了个域名,搭了服务器,并把博客部署在服务器上,用的是WordPress。在当时,WordPress就已经是一个成熟的网站建设工具。WordPress功能是挺强大,主题、插件多,用户量基数也大,很容易就可以找到一些自己喜欢的“小物件”放到自己的博客上。奈何当时对代码之类的东西一窍不通,完全是通过可视化操作去完成的,也就不知道Go语言与PHP语言的区别,当然PHP语言在当时依然是主流。那会儿不仅要把精力放在服务器的维护上,还要把网站的Blog给弄好,还要用到Nginx、Mysql、phpmyadmin一大堆工具,还要在数据库中修改才能满足一些自己的需求,可以说是十分的繁琐。后来因为原服务器废弃,数据也没有转移,也没有本地保存,折腾的东西也就随之而去了...

  • 很久没有接触这方面的知识,现在就相当于回炉重造。了解了一下目前主流的Blog建站工具之后,Hexo和Hugo进入我的眼帘。从搜索引擎的数据上来看,Hexo的内容量与Hugo相比,完全不在一个数量级...
    Hexo
    Hugo

  • 传统在服务器部署,虽然本地也可以操作,修改内容,但大部分人都是仅仅只在服务器上完成,省去了本地修改、远程部署的步骤。导致服务器一崩,所有数据都随风而去...比如我自己在几年前也是如此。现如今,静态网站成为主流,Go语言也让国际大厂争先使用,像Google,Dropbox,SoundCloud,Twitter,PayPal等公司都用 Go 语言构建了他们的后端系统。

如何选择Hexo与Hugo?

Hugo中文文档:

  • Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。当前的静态网站生成工具对环境依赖过多,性能较差,于是使用 Go 语言写了一个静态网站生成器 Hugo。不仅解决了环境依赖、性能较差的问题,还有使用简单、部署方便等诸多优点,通过 LiveReload 实时刷新,极大的优化文章的写作体验。Hugo 能做什么?通过 Hugo 你可以快速搭建你的静态网站,比如博客系统、文档介绍、公司主页、产品介绍等等。

Hexo中文文档:

  • 什么是Hexo ? Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Heroku上,是搭建博客的首选框架。

最终选择

  • 可以看出,Hexo与Hugo都是静态网站生成器的首选,而且都可以用上Github-Pagesopen in new window。在网上筛选了使用者反馈信息之后,最终我还是选择了用Go语言编写的Hugo+Github-Pages+CDN来搭建此Blog。

准备工作

安装环境和工具

环境工具
WindowsHugoGitVS codegithub-pages
  • VS Codeopen in new window:巨硬出品的一款开发集成工具。功能之强大让我感觉,我之前的传统敲代码、找依赖的方式太2了。

  • Gitopen in new window:一个版本控制系统,连接 Github 的钥匙。

  • Github-pagesopen in new window:Github出品,必属精品!等等,这句话怎么这么耳熟?又想到github也被巨硬收购了...细思极恐...

  • Hugoopen in new window:今天的主角,本地新建一个名为"Hugo"的目录、一个名为"Sites"的用于存放所有博客站点的目录,Hugo 目录下应有三个文件;同时,下载好 Git 程序。

开始实战

本地搭建

将 hugo 添加到环境变量

  • WIN+R 输入 sysdm.cpl高级===>> 环境变量 ===>> Path ===>> 添加刚才新建的 Hugo 中的 bin 目录, bin 中放进刚刚下载的 hugo.exe

Hugo

bin

hugo.exe

Site

example

Git Bash

  • 进入 Site 文件夹,鼠标右键 Git Bash 或打开 Git Bashcd 到这个目录,创建 hugo 博客所在目录
hugo new site <example>

文件夹内容目录

example

archetypes # 存放模板

default.mdopen in new window # 模板

config.toml # 基础配置文件

content # 存放 page 与 post,所有新博文都要存放在 content 中

data # 存放数据模板

layouts # 存放布局模板文件,如果想要调整主题中的页面布局,可以在 layouts 中放入同名文件,hugo 将优先读取根目录中的 layouts 文件,避免直接修改主题文件,导致不必要的错误

static # 存放静态资源,比如自定义 css、图片图标等

themes # 主题文件夹

安装 VS code 插件

  • 打开 VS Code 软件。点击Extensions,安装所需插件。推荐几个必备和好用的插件。

    • gpm 用来管理 Github 上的文件。 必备

    • Setting Sync 同步 Github 与本地文件。 必备

    • Markdown All in One 使用 Markdown 写作的利器。必备

    • Chinese Language Pack for Visual Studio Code VS Code 的汉化插件。 推荐

    • Auto Rename Tag 如果涉及修改代码的时候,非常好用。推荐

    • Material Icon Theme 一套个性的图标主题。 推荐

生成 git 本地仓库

  • 进入新生成的博客文件夹并初始化一个空的 git 本地仓库,之后博客文件夹里会出现一个隐藏的.git 文件夹
cd <example>
git init

生成 SSH 密钥

仅首次,后面可以记录下,以备使用

  • SSH key 一般存储在系统盘 C: \Users<用户名>.ssh 目录中,git 全局设置存在 C: \Users<用户名>.gitconfig 文件中。
ssh-keygen -t rsa -C "[email protected]" #最好是github账号邮箱。
  • 之后会跳出一堆提示,在系统提示输入 passphrase 时直接回车不添加。生成的密钥对会储存在 C: \Users<用户名>.ssh 中,公钥存放在 id_rsa.pub 里,私钥存放在 id_rsa 里,妥善保管密钥对,公钥稍后需要使用,私钥非极特殊情况勿上传!

  • 在博客根目录进行 git 的配置。最好是github账号、邮箱。本地提交 commit 时 github 上可以查看提交者信息。

git config user.name "examplename"
git config user.email "[email protected]"

安装主题

  • 找到喜欢的主题open in new window,在themes目录下 git clone 或者 git submodule add ,模块化安装能够方便升级主题(根目录上传到GitHub后,themes文件夹会链接到主题仓库界面,后面要用到的action要想跑起来一定要记得加上submodule的配置)。

  • 以本博客主题为例,用模块方式安装, themes/github-style 为安装到目标文件夹

git submodule add git@github.com:MeiK2333/github-style.git themes/github-style
  • 打开新的 config.toml 文件,修改 theme = “example-theme” 为你安装的主题名,主题名要与 themes 中的主题文件夹名称一致。

本地搭建预览

  • 至此,本地博客就搭建好了。在博客根目录下 git bash,使用 hugo server 来看下主题的效果!(hugo server -D 的话草稿也会显示,注意是大写 D)跳出一大堆提示后,在任意浏览器打开 http://localhost:1313open in new window 就能实时查看博客效果与调整。如果的博客设置有误,页面会无法查看,请先排除错误后再进行尝试。不需要查看后 Ctrl+C 退出即可。

根目录同步私有仓库

源码& Public 分开存放

  • 建两个 repositories ,一个存放根目录文件,设置为私密,另一个用来存放 public 中的内容,设置为公开

上传公钥

这里选择直接上传到该 github 用户的 setting 里

  • 点击 github 页面右上角头像右侧下拉按钮,进入 Settings,找到左侧页面 SSH and GPG keys ,点击 New SSH key ,取一个便于识别的名称,下方填入之前生成的id_rsa.pub中的内容(以"ssh-rsa"开头,以邮箱结尾)。

远程连接测试

ssh -T git@github.com

显示 successfully 字样即可

Hi <github-username>! You've successfully authenticated, but GitHub does not provide shell access.

生成 Token,用于连接两个仓库

  • 右上角 Settings 里找到 Developer settings ,再点 Personal access tokensGenerate new token 生成新的 token ,有效期可选永久生效。

  • Select scopes 里勾选 repo 全部内容与 workflow。最后点击绿色按钮生成。

  • 页面刷新后这个 Token 将不再显示,所以在导入前不要弄丢!

Push 本地到私有仓库

  • 打开刚刚建立的私有仓库,复制SSH克隆代码,在 VS code 中的项目管理中点 + 克隆,粘贴,回车即可克隆。前提:本地的公钥与 github 设置里的公钥信息要一致。至此远程与本地即可连接成功。

  • 将本地的博客根目录内容全部粘贴到连接好的私有仓库,开始 push。git 默认的分支应该是(master),因为现在 github 的默认分支从 master 换成了 main(详见 GitHub 将替换掉 master 等术语 ),我们先切换分支到main:

git checkout -b main
  • push 命令三件套
git add . # 添加目录下全部内容
git commit -m "new job" # 提交说明,出问题了可以回退到之前的commit
git push -u origin main # 将本地内容推送到远程
  • 有时候新提交的本地有删除的内容,但是远端并没有删除,将 -m 改为 -am 即可

  • 空文件夹不会被 push 上去,不管;如果有其他文件、文件夹不想 push 上去,在根目录下新建 .gitignore 文件,里面存放不想 push 的内容。

  idea/            //忽略idea目录下的所有文件
  /idea/do.txt     //忽略某个具体文件
  !test.txt        //不忽略 test.txt 文件
  /TODO            //仅仅忽略项目根目录下的 TODO 文件,不包括 test/TODO
  *.zip            //忽略所有.zip结尾的文件
  doc/*.txt        //忽略 doc/notes.txt,但不包括 doc/server/arch.txt
  git rm -r --cached idea/do.txt    //-r为递归

私有仓库生成 Secrets

  • 这一步为自动部署到 public 做准备,进入刚刚建好的 repository,点进它的 Settings 中,找到 Secrets,点击 New repository secret,名称为 PERSONAL_TOKEN ,内容为之前备份下来的 Token

自动部署到公开仓库

Github Action

  • 进入博客根目录仓库,点上方的 Actions,set up a workflow yourself,之后你会发现 github 会在根目录下新建/.github/workflows/xxx.yml 文件。我的文件名 autodeploy.yml
name: luvsia-hugo-blog-autodeploy # 自行命名

on:
  push:
    branches:
      - main  # 博客根目录的默认分支,这里是main,也可是master
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-latest
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
      - uses: actions/checkout@v2
        with:               # 如果你安装主题时用的是git submodule add
          submodules: true  # 那么这三行不必注释掉,这一行填写 true
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'  # 获取最新版本的hugo
          extended: true          # 如果你使用的不是extended版本的hugo,将true改为false

      - name: Build
        run: hugo   # 使用hugo构建静态网页

      - name: Deploy to github
        uses: peaceiris/actions-gh-pages@v3
        if: ${{ github.ref == 'refs/heads/main' }}  # 注意填写main或者master
        with:
          personal_token: ${{ secrets.PERSONAL_TOKEN }} # 如果secret取了其他名称,将PERSONAL_TOKEN替换掉
          external_repository: ventusoon/LuvSia # 填写远程 public 仓库 
          publish_dir: ./public
          cname: luvsia.com        # 填写自定义域名
  • 格式参考GitHub Pages actionopen in new window

  • 提交 commit ,保存, Action 变成绿色即成功!

  • 这时公开仓库已经自动建了一个名为 gh-pages 的分支,里面出现的东西就是源码通过 Hugo 命令生成的静态网页文件,此时打开博客域名就可以看到博客内容。

  • 根目录下的 config 文件中 base url 更换为自定义域名。

CDN加速

A @ 185.199.108.153
A @ 185.199.109.153
A @ 185.199.110.153
A @ 185.199.111.153
CNAME @ 指向公开仓库的github域名
CNAME WWW 指向公开仓库的github域名
  • 进入公开仓库 SettingsPages 页面添加自定义域名,等待 DNS 检验成功,在此页面即可看到 仓库的github域名` 。

  • 使用了 CDN,github 上的 强制https 按钮可能不能点;如果无法正常显示 https,也可以在Cloudflare建立 强制https 规则。

大功告成

填坑后记

  1. 写新文章最好用命令行新建 md 文件,文件名为英文名最佳,增加解析效率。
hugo new post/first-post.md
  1. 如在远程端操作过,则在本地执行操作前,都要 git pull 拉取远端数据,同步到本地。上面我们在远程博客根目录新建了 workflow,在本地开始写新的博文前,先在本地的博客根目录进行同步,不然会报错:
git pull
  1. 执行 hugo server 过程中错误退出 git,导致之后执行时 1313 端口被占用,windows+r 输入 cmd 或者在VS code中打开 powershell 窗口:
netstat -aon|findstr "1313"  #筛选使用1313端口的进程
taskkill /f /PID xxxxx  #杀死占用的进程
  1. 重大更新!!!实现 Hugo Blog 源码github、gitee、gitlab三端同步,特别注意『格式』,最好在github中添加,避免出错!
  • 分别在gitee、gitlab上新建公钥文件,取名分别为GITEE_KEY、GITLAB_KEY

  • 更新 autodeploy.yml 文件,在后面加上如下代码

  mirror_to_gitee:
    runs-on: ubuntu-latest
    steps:
      - name: 'Checkout'
        uses: actions/checkout@v1
      - name: 'Mirror to gitee'
        uses: pixta-dev/repository-mirroring-action@v1
        with:
          target_repo_url:
            [email protected]:ventusoon/LuvSia.com.git  # gitee仓库链接
          ssh_private_key:
            ${{ secrets.GITEE_KEY }}  # 新建的GITEE_KEY

  mirror_to_gitlab:
    runs-on: ubuntu-latest
    steps:
      - name: 'Checkout'
        uses: actions/checkout@v1
      - name: 'Mirror to gitlab'
        uses: pixta-dev/repository-mirroring-action@v1
        with:
          target_repo_url:
            [email protected]:ventusoon/LuvSia.com.git  # gitlab仓库链接
          ssh_private_key:
            ${{ secrets.GITLAB_KEY }}  # 新建的GILAB_KEY
  • Gitee
gitee
gitee
  • Gitlab
gitlab
gitlab
  1. 新增 小康博客open in new window 鼠标指针、侧边栏样式。
  • extended_head.html 中添加以下
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/static-butterfly/dist/css/index.min.css">

写在最后

本篇文章的部署流程对网上教程进行了整合,再加上自己的理解而成。

Comments
  • Latest
  • Oldest
  • Hottest
Powered by Waline v2.15.8