这应该是目前全网最全面的博客搭建教程了。将从最基础hexo的创建到语雀写博客为止。
Hexo简介
Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Coding上,是搭建博客的首选框架。大家可以进入hexo官网进行详细查看,因为Hexo的创建者是台湾人,对中文的支持很友好,可以选择中文进行查看。
准备条件:这些提前准备好,本文不做讲解。不会安装百度解决
一、安装Hexo
由于npm在国内下载比较慢,所以在国内推荐使用淘宝镜像
npm config set registry https://registry.npm.taobao.org
- 创建文件夹blog
- 地址栏输入cmd或者在文件夹里右键git bash
- 输入命令,安装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
- 初始化本地仓库
git init
此时会生成一个隐藏的.git文件夹
- 将所有文件纳入git版本管理中
git add .
- 将所有更改放到本地暂存区域,等待上传。
git commit -m "上传的说明"
- 连接远程仓库
git remote add origin "远程仓库地址"
- 上传至远程仓库
git push
如果报错,先 git pull(拉取远程仓库)
或者强制上传(会覆盖原来所有文件)
git push -u origin master -f
三、配置GitHub Action
- 获取公钥和私钥
ssh-keygen -t rsa -C "Github 的邮箱地址"
后面的全部回车不用管。
然后会在C:\Users\用户名.ssh 目录生产两个文件:id_rsa(私钥)和id_rsa.pub(公钥),记事本打开,复制公钥的内容
- GitHub上添加公钥
打开GitHub,右上角头像–>Setting–>SSH and GPG keys–>New SSH key,名称随便填,内容填写复制的公钥内容
- 源码仓库添加私钥
进入hexoblog源码仓库,找到Setting–>Secrets–>Add a new secret ,名称填写HEXO_DEPLOY_PRIVATE_KEY
- 获得语雀的Token
注册语雀语雀上点击个人头像 –> 设置 –> Token 即可获取,同样在源码仓库的Secrets进行填写,名称为YUQUE_TOKEN
- 填写Action
找到源码仓库的Action,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 }}
- 保存就会自动执行一次。
四、配置腾讯 serverless 云函数
- 登录腾讯云,搜索云函数,创建
- 选择
python
,2.7 和 3.6 都行,空白函数
去github账号设置找到Developer settings–>Personal access tokens,新建一个token
勾选下面4个或者全部勾选。复制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 网关触发器
注:如果提示没有权限,去用户组添加权限
五、配置语雀
- 注册,登录
- 创建知识库–>文档知识库–>可见范围为互联网可见
- 工作台–>知识库–>找到新创建的知识库,管理–>设置–>路径进行自定义,找到u加一串数字的,这个就是用户id,填到上面package.json中的 “login”
- 找到开发者,添加Web Hook,url填写刚刚腾讯云函数的url
这一步就大功告成了!
属于自己的个人博客就搭建完成了,永久免费(除非github倒闭)!
六、发布文章
接下来,只要在语雀的知识库里发布文章,语雀就会触发云函数,云函数触发Action,Action进行编译,利用yuque-hexo向语雀获得文章,再提交到静态博客的仓库。这样就实现在线博客的功能啦!
本篇结束。有问题的可以留言或者联系我哦。
评论区