侧边栏壁纸
  • 累计撰写 30 篇文章
  • 累计创建 40 个标签
  • 累计收到 4 条评论

Hexo+GitHub+Action+腾讯云函数+语雀搭建自动化个人博客

kiko
2020-09-02 / 0 评论 / 0 点赞 / 872 阅读 / 1,877 字
温馨提示:
本文最后更新于 2023-03-19,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

这应该是目前全网最全面的博客搭建教程了。将从最基础hexo的创建到语雀写博客为止。

Hexo简介

Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Coding上,是搭建博客的首选框架。大家可以进入hexo官网进行详细查看,因为Hexo的创建者是台湾人,对中文的支持很友好,可以选择中文进行查看。


准备条件:这些提前准备好,本文不做讲解。不会安装百度解决


一、安装Hexo

由于npm在国内下载比较慢,所以在国内推荐使用淘宝镜像

npm config set registry https://registry.npm.taobao.org
  1. 创建文件夹blog
  2. 地址栏输入cmd或者在文件夹里右键git bash
  3. 输入命令,安装hexo脚手架。
cnpm install -g hexo-cli

接下来创建博客文件,接着在命令行输入

hexo init

新建完成后,指定文件夹目录下有:

  • node_modules: 依赖包
  • public:存放生成的页面
  • scaffolds:生成文章的一些模板
  • source:用来存放你的文章
  • themes:主题
  • _config.yml: 博客的配置文件

接下来是一些hexo的常用指令

  • 生成public文件。就是生成的静态博客文件
hexo g
  • 生成 .deploy_git 文件夹,可以上传里面的文件至github
hexo d
  • 启动服务器。默认情况下,访问网址为: http://localhost:4000/
hexo s

其他的命令不太常用,就不介绍了,自己官网看文档去。
你可以自己先安装一些主题,写一些配置,本地预览一下,再进行上传。

安装 yuque-hexo

在命令行输入

npm install yuque-hexo --save

编辑package.json文件,添加以下内容

1.在"scripts"标签中添加

"start": "yuque-hexo clean && yuque-hexo sync && hexo clean && hexo generate",

2.在末尾添加(记得修改中文提示的内容)

"yuqueConfig": {
    "baseUrl": "https://www.yuque.com/api/v2",
    "login": "语雀的id",
    "repo": "语雀知识库名称",
    "mdNameFormat": "title",
    "postPath": "source/_posts",
    "onlyPublished": false
  }

例如:

红框处

二、上传至GitHub。

首先,我们需要两个仓库(github教程),一个放hexo的源文件,一个放hexo生成的静态文件。
源文件仓库名字随意(假设为hexoblog),可以设置为私有仓库;静态文件仓库的名字为你的github名.github.io 必须为公开库。
创建好仓库后,将源文件上传至hexoblog仓库。

打开命令行cmd或者git bash

  1. 初始化本地仓库
git init

此时会生成一个隐藏的.git文件夹

  1. 将所有文件纳入git版本管理中
git add .
  1. 将所有更改放到本地暂存区域,等待上传。
git commit -m "上传的说明"
  1. 连接远程仓库
git remote add origin "远程仓库地址"
  1. 上传至远程仓库
git push

如果报错,先  git pull(拉取远程仓库)
或者强制上传(会覆盖原来所有文件)

git push -u origin master -f

三、配置GitHub Action

  1. 获取公钥和私钥
ssh-keygen -t rsa -C "Github 的邮箱地址"

后面的全部回车不用管。
然后会在C:\Users\用户名.ssh 目录生产两个文件:id_rsa(私钥)和id_rsa.pub(公钥),记事本打开,复制公钥的内容

  1. GitHub上添加公钥

打开GitHub,右上角头像–>Setting–>SSH and GPG keys–>New SSH key,名称随便填,内容填写复制的公钥内容

  1. 源码仓库添加私钥

进入hexoblog源码仓库,找到Setting–>Secrets–>Add a new secret ,名称填写HEXO_DEPLOY_PRIVATE_KEY

添加私钥

  1. 获得语雀的Token

注册语雀语雀上点击个人头像 –> 设置 –> Token 即可获取,同样在源码仓库的Secrets进行填写,名称为YUQUE_TOKEN

  1. 填写Action

找到源码仓库的Action,set up a workflow yourself

set up a workflow yourself

名字随意,将下面代码填入.。注意修改43行,你的github名称,其他的不用修改

# workflow name
name: Deploy To Github Pages

# 当有 push 到仓库和外部触发的时候就运行
on: [push, repository_dispatch]

# YUQUE_TOKEN
# Github_SSH_PRIVATE_KEY
jobs:
  deploy: 
    name: Deploy Hexo Public To Pages
    runs-on: ubuntu-latest 
    env:
      TZ: Asia/Shanghai    
        
    steps:
    # check it to your workflow can access it
    # from: https://github.com/actions/checkout
    - name: Checkout Repository master branch
      uses: actions/checkout@master 
      
    # from: https://github.com/actions/setup-node  
    - name: Setup Node.js 10.x 
      uses: actions/setup-node@master
      with:
        node-version: "10.x"
    
    # from https://github.com/x-cold/yuque-hexo
    - name: Setup Hexo Dependencies and Generate Public Files
      env:
        YUQUE_TOKEN: ${{ secrets.YUQUE_TOKEN }}
      run: |
        npm install hexo-cli -g
        npm install yuque-hexo -g
        npm install
        npm run start
        
    # from https://github.com/peaceiris/actions-gh-pages    
    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
          deploy_key: ${{ secrets.HEXO_DEPLOY_PRIVATE_KEY}}
          external_repository: 你的github名称/你的github名称.github.io
          publish_branch: master
          publish_dir: ./public
          commit_message: ${{ github.event.head_commit.message }}
  1. 保存就会自动执行一次。

四、配置腾讯 serverless 云函数

  1. 登录腾讯云,搜索云函数,创建
  2. 选择 python,2.7 和 3.6 都行,空白函数

名称随意,空白函数

去github账号设置找到Developer settings–>Personal access tokens,新建一个token

勾选下面4个或者全部勾选。复制token

复制token

粘贴下面的代码,记得修改中文提示

修改github用户名和token

# -*- coding: utf8 -*-
import requests

def main_handler(event, context):
    r = requests.post("https://api.github.com/repos/你的github用户名/源码仓库名/dispatches",
    json = {"event_type": "start"},
    headers = {"User-Agent":'curl/7.52.1',
              'Content-Type': 'application/json',
              'Accept': 'application/vnd.github.everest-preview+json',
              'Authorization': 'token github的token'})

    if r.status_code == 204:
        return "This's OK!" 
    else:
        return r.status_code

填完测试一下,返回This’s OK!就是成功了。这时,去源码仓库会发现Action正在执行。

点击触发管理,配置触发方式,保存 访问路径,后面要用到

触发方式:API 网关触发器
注:如果提示没有权限,去用户组添加权限

触发方式

五、配置语雀

  1. 注册,登录
  2. 创建知识库–>文档知识库–>可见范围为互联网可见
  3. 工作台–>知识库–>找到新创建的知识库,管理–>设置–>路径进行自定义,找到u加一串数字的,这个就是用户id,填到上面package.json中的 “login”
  4. 找到开发者,添加Web Hook,url填写刚刚腾讯云函数的url

添加Web Hook

这一步就大功告成了!
属于自己的个人博客就搭建完成了,永久免费(除非github倒闭)!

六、发布文章

接下来,只要在语雀的知识库里发布文章,语雀就会触发云函数,云函数触发Action,Action进行编译,利用yuque-hexo向语雀获得文章,再提交到静态博客的仓库。这样就实现在线博客的功能啦!

本篇结束。有问题的可以留言或者联系我哦。

0

评论区