基于Hexo的个人博客搭建

使用 Hexo 博客框架快速搭建个人博客,配合 Github Pages 实现博客部署及域名访问

Hexo安装

  • 前置环境:安装Node.jsgit

配置本地git 仓库

找到Git安装目录,打开Git Bash窗口,设置user.name和 user.email

git config --global user.name niceday
git config --global user.email niceday@163.com

配置Git公钥

ssh-keygen -t rsa -C "niceday@163.com"

连按三个回车后,得到生成的公钥文件 id_rsa.pub ,复制其中的内容,添加到Github的SSH KEY 中,添加完成后,使用以下命令查看是否添加成功

ssh git@github.com

Hexo搭建

Hexo 官方文档: 文档 | Hexo

进入创建好的 Blog 文件夹,右击选择 Git Bash here 打开命令窗口,输入以下命令

# 安装Hexo
npm install -g hexo-cli
# 检查安装是否成功
hexo -v
# 初始化hexo文件夹
hexo init blog
cd blog
# 新建一个文章
hexo new test_blog
# 生成静态页面
hexo g
# 启动服务器,本地预览 localhost:4000
hexo s

Hexo 主题安装

参考 Hexo Fluid 官方手册:Hexo Fluid 用户手册

Hexo 部署至 Nginx

Hexo 项目目录下,执行以下命令打包 Hexo ,生成 public 目录

hexo g

public 目录下的文件放至 nginx 的html 目录,启动 nginx 即可

Github Pages

GitHub 主页右上角加号 -> New repository :

  • Repository name 中输入 账号名.github.io
  • 勾选 “Initialize this repository with a README”

创建仓库后,默认自动启用HTTPS,访问地址为 https://账号名.github.io

部署 Hexo 到 Github Pages

在 Blog 文件目录下,输入以下命令

# 安装 hexo-deployer-git
npm run install hexo-deployer-git --save

安装完成后,修改同目录下_config.yml文件末尾部分

deploy:
  type: git
  repository: git@github.com:账户名/账户名.github.io.git
  branch: main

完成后,运行以下命令,将Hexo部署到Github Pages,通过域名 https://账号名.github.io 可查看博客网站

hexo deploy

Github Action 实现自动化部署 Hexo

  1. 配置部署公钥

利用 ssh-keygen 生成公私钥

  • Github Pages 仓库 Settings -> Secrets -> Actions , 新建一个 HEXO_DEPLOY_PRIVATE_KEY 存放私钥

  • Pages 仓库 Settings -> Deploy keys ,新建一个 HEXO_DEPLOY_PUB_KEY 存放公钥

  1. 编写 Action

.github/workflows 新建 deploy.yml 文件,内容如下:

name: CI
on:
  push:
    branches:
      - dev-dunkingcurry
jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node_version: [14.x]

    steps:
      - name: Checkout source
        uses: actions/checkout@v2
        with:
          ref: dev-dunkingcurry

      - name: Use Node.js ${{ matrix.node_version }}
        uses: actions/setup-node@v1
        with:
          version: ${{ matrix.node_version }}

      # 缓存node_modules,避免每次跑action都要重新下载
      - name: Cache node modules
        uses: actions/cache@v1    
        id: cache    
        with:
        	path: node_modules
        	key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
        	restore-keys: |
          		${{ runner.os }}-node-

      - name: Setup hexo
        env:
          ACTION_DEPLOY_KEY: ${{ secrets.HEXO_DEPLOY_PRIVATE_KEY }}
        run: |
          mkdir -p ~/.ssh/
          echo "$ACTION_DEPLOY_KEY" > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan github.com >> ~/.ssh/known_hosts
          git config --global user.email "DunkingCurry30"
          git config --global user.name "123456789@qq.com"
          npm install hexo-cli -g
          npm install
      - name: Hexo deploy
        run: |
          hexo clean
          hexo g
  1. push 至 Pages 仓库

push 至 Pages 仓库后,在 仓库 Action 界面下查看自动化流水线

点击可查看每个步骤的执行信息

  1. 验证自动化部署结果

流水线显示执行成功后,通过域名 https://账号名.github.io 可查看博客网站内容,更新成功

至此,大功告成!

Hexo 提交代码同时部署至 云服务器Github Pages 可参考该篇文章: docker 部署 gitlab gitlab-runner 实现 CI

欢迎访问个人博客:DunkingCurry’ s Blog

Hexo是一个基于Node.js的静态博客框架,可以帮助你快速搭建个人博客。在Mac上搭建Hexo个人博客的步骤如下: 1. 安装Node.js:首先确保你的Mac上已经安装了Node.js,可以在终端中输入`node -v`来检查是否已经安装。如果没有安装,可以去Node.js官网下载并安装。 2. 安装Hexo:在终端中输入以下命令来安装Hexo: ``` npm install -g hexo-cli ``` 3. 创建博客:在终端中选择一个合适的目录,然后执行以下命令来创建一个新的Hexo博客: ``` hexo init myblog cd myblog npm install ``` 4. 配置博客:在博客目录下找到 `_config.yml` 文件,使用文本编辑器打开进行配置。你可以设置博客的标题、描述、作者等信息,还可以选择主题和插件。 5. 编写文章:在终端中执行以下命令来创建一篇新文章: ``` hexo new "My First Post" ``` 这将在 `source/_posts` 目录下创建一个新的Markdown文件,你可以使用Markdown语法来编写文章内容。 6. 生成静态文件:在终端中执行以下命令来生成静态文件: ``` hexo generate ``` 生成的静态文件将会存放在 `public` 目录下。 7. 预览博客:在终端中执行以下命令来启动Hexo服务器并预览博客: ``` hexo server ``` 然后在浏览器中访问 `http://localhost:4000` 就可以看到你的博客了。 以上就是在Mac上使用Hexo搭建个人博客的基本步骤。如果你想了解更多关于Hexo的详细配置和使用方法,可以查阅Hexo官方文档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值