mac下搭建hexo个人博客并部署到github

发表于 更新于 阅读次数： Artalk：

主要内容：

  • github注册与创建仓库

  • 安装git、nodejs、hexo

  • 初始化+创建hexo博客

  • 部署到github上+自动化

  • 绑定域名、更换主题、设置评论区...（//TODO）

1.前言

​ 河北疫情导致圣诞与春节间的小假期无法返校，在家上网课而且空余时间没法打发，于是想着扩充下自己的技能树。再加上很久之前就有弄一个自己的博客的想法所以开始着手上网找教程了。不想自己花钱买服务器所以决定用github几番对比之后决定使用hexo。

​ 网上的教程有些或多或少的bug。。。导致自己琢磨一些很弱智的问题浪费了很多时间我把自己参考多份方案后的内容总结下来做参考。

2.本地安装nodejs、git、hexo

新建

终端中输入：

1
$ node -v #是否出现安装版本信息，出现说明已经安装了
新建

终端中输入：

1
$ git --version #是否出现安装版本信息，出现说明已经安装了
  • Hexo下载
1
npm install -g hexo-cli

安装成功后在你想要存储博客项目的位置创建你的文件夹，我这里将路径设为“PATH/blog”

1
2
3
4
5
6
7
8
9
10
# 在你的家目录下创建一个blog文件夹
mkdir PATH/blog
# 进入目录
cd PATH/blog
# 初始化目录
hexo init
#安装必备组件
npm install
# 开启本地服务 
hexo s

此时打开http://localhost:4000/ 就可以看到运行在本地的hexo页面

新建

3. github注册与创建仓库

  • 在github 官网注册账号，可能需要🚀
新建
  • 新建一个仓库
新建

注意仓库的名字必须是 (username/ +) usrname.github.io (由于我之前注册过这个名字的仓库，所以github这里提示我名字重复)

新建

4. 部署到github

  • 将博客关联到之前创建的github仓库上去，打开/blog文件夹下的“_config.yml”文件，这个文件存储的是博客的配置内容。

  • 打开这个文件后在最下找到配置相关的部分将deploy的内容替换为(注意将我repository中的用户名替换为自己的用户名)

    1
    2
    3
    4
    5
    6
    # Deployment
    ## Docs: https://hexo.io/docs/one-command-deployment
    deploy:
      type: git
      repository: https://github.com/windskyshaoyu/windskyshaoyu.github.io.git
      branch: main

    ！ 注意这里有一个神坑，大部分教程最后branch给的是“master”因为github创建仓库时的默认分支是master。但受自由美利坚种族冲突的影响，自2020.10.1起，github取消“master”这一可能带有种族歧视的词汇，默认分支更名为main。所以在部署时应部署到main分支上，也可以在设置中设置其他分支为显示页面可自行摸索。

终端输入：

1
2
3
4
5
6
7
8
9
10
11
#部署插件
npm install hexo-deployer-git --save

#清除之前的记录
hexo clean

# g for generate 编译
hexo g 

#d for deploy 部署到github
hexo d

此时若运行正常网速正常的情况下，便可以在https://your_user_name.github.io/下看到自己的博客主页。

  • 每次输入账号密码过于繁琐——关联Github账号，免密提交。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # 用你注册GitHub时的邮箱号，进行秘钥生成
    cd ~
    ssh-keygen -t rsa -C "[email protected]"
    # 系统就会生成一个隐藏文件夹.ssh
    cd .ssh

    #ls 应该能看到id_rsa.pub文件
    ls

    # 复制其中全部内容
    vim id_rsa.pub

    打开设置 --> 选择SSH and GPG keys --> 新建一个ssh key将密钥复制进去，title可以随便填写

新建 新建 新建

5 部署到阿里云服务器

由于github在国内访问有诸多问题，此处提供在阿里云服务器上部署的操作步骤

在阿服务器上配置git与git账户

1
2
3
4
5
6
7
// 阿里云服务器安装git
yum install git
//创建git账户
adduser git
// 添加git账户权限
chmod 740 /etc/sudoers
vim /etc/sudoers

在红框位置处添加权限给git用户

1
git     ALL=(ALL)     ALL
gitsudo 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 改回文件权限
chmod 400 /etc/sudoers

//设置账户密码
sudo passwd git

//切换至git用户，创建ssh和keys文件，并赋予权限
su git
mkdir ~/.ssh
vim ~/.ssh/authorized_keys

//然后在本地电脑中执行： cat ~/.ssh/id_rsa.pub | pbcopy得到公钥（在剪切板中）
// 将公钥复制粘贴到authorized_keys
chmod 600 ~/.ssh/authorzied_keys
chmod 700 ~/.ssh

//然后就可以执行本地执行ssh 命令测试是否可以免密登录
ssh -v git@SERVER

创建git仓库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//获取root权限,建立git仓库
su root
cd /home/git
git init --bare blog.git

//修改blog.git权限
chown git:git -R blog.git

// 在 /home/git/blog.git 下，有一个自动生成的 hooks 文件夹，我们创建一个新的 git 钩子 post-receive，用于自动部署。
vim blog.git/hooks/post-receive

// 添加如下内容,hexo的文件区域位/www/wwwroot/Hexo
#!/bin/sh
git --work-tree=/www/wwwroot/Hexo --git-dir=/home/git/blog.git checkout -f

//修改文件权限
chmod +x /home/git/blog.git/hooks/post-receive

使用宝塔面板建立nginx服务

宝塔Linux面板是提升运维效率的服务器管理软件，支持一键LAMP/LNMP/集群/监控/网站/FTP/数据库/JAVA等100多项服务器管理功能。支持的操作系统有CentOS，Ubuntu、Debian、Fedora.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 首先切换到根目录
cd ~

//安装6.9稳定版（宝塔linux6.x版本基于centos7开发，适用于centos7.x版本）
yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh

//centos 7.x版本以下安装宝塔5.9
yum install -y wget && wget -O install.sh http://download.bt.cn/install/install.sh && sh install.sh

//登陆宝塔面板，安装完成后会得到：
Bt-Panel-URL: http://119.34.25.52:8888/af293c8c       #登录宝塔面板的地址
username: aaaaaaaaa                                   #账号
password: 123456789  

//输入bt，可以更改端口设置用户名和密码等信息帮助

添加网站：

  • 在宝塔面板，进入软件商店，输入”Nginx”，然后搜索，安装免费的那个。
  • 等待部署完成，部署完成之后，点击网站->添加站点:
    • 填写你的域名(www.vvindsky.xyz)，没有的话写你的服务器ip地址。其他的不要改。
    • 网站目录：/www/wwwroot/Hexo
gitsudo

  • 配置文件：

    • SSL配置，去阿里云申请免费的SSL

  • 回到服务器终端重启宝塔：

1
service bt restart

修改本地Hexo Deploy 配置

进入本地电脑hexo博客的根目录，编辑站点配置文件 _config.yml，找到deploy，修改成以下

1
2
3
4
5
6
7
8
9
10
11
12
//部署到github:
 deploy:
   type: git
   repository: https://github.com/XXX/XXX.github.io.git
   branch: main


// 部署到服务器：
deploy:
  type: git
  repo: git@your_IP_address:/home/git/blog.git
  branch: master

Artalk 评论区+Next 主题

下载最新版本的NEXT主题，不然配置artalk时会出现问题

NEXT的配置与安装

直接看https://theme-next.js.org/docs/getting-started/

NEXT的配置我记得知乎有一片讲的不错，转载来了，可以按需使用

知乎

Artalk 配置

1
2
3
4
5
6
7
8
9
10
// Docker 部署
docker run -d \
    --name artalk \
    -p 8080:23366 \
    -v $(pwd)/data:/data \
    --restart=always \
    artalk/artalk-go
    
// 执行命令创建管理员账户：
docker exec -it artalk artalk admin

此时artalk运行在 http://your_domain:8080 ，配置文件目录在服务器的/data下。

可以使用宝塔面板反向代理，例如我的artalk 服务器反向代理在了域名: artalk.vvindsky.xyz, 注意 不要忘了为artalk也注册SSL认证

连接Artalk与Hexo博客

使用github插件：https://github.com/leirock/hexo-next-artalk

使用阿里云服务器发送邮件提醒

  1. 开通阿里云邮件服务
  2. 将send mail以及密钥等都输入artalk
gitsudo

AccessKey与AccessKeySecret获取: https://help.aliyun.com/zh/ram/user-guide/create-an-accesskey-pair