使用Hexo在Github Pages上部署静态博客

使用Hexo在Github Pages上部署静态博客

写在前面

本文写于2023/3/23，具体配置步骤具有时效性，后续如有必要会持续更新。

阅读本教程需要有 Git 和 Github 基础，对 Markdown 语法有一定的了解。

什么是Github Pages？

GitHub Pages 是一项静态站点托管服务，它直接从 GitHub 上的仓库获取 HTML、CSS 和 JavaScript 文件，通过构建过程运行文件，然后发布网站。

你可以在 GitHub 的 github.io 域或自己的自定义域上托管站点。

什么是Hexo？

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

配置环境准备

这里列出笔者的环境

  • Node.js 18.14.2
  • Git

安装Hexo

  • node.js 安装镜像在国外，我们这里更换国内阿里镜像，执行npm config set registry https://registry.npmmirror.com

  • 安装 hexo，执行 npm install -g hexo-cli

Hexo的初始化

  • 创建 Blog 文件夹，打开终端进入该目录
  • 打开 steam++ 加速 git clone
  • 执行 hexo init 初始化 Blog 文件夹
  • 执行 npm install 安装依赖包
  • 执行 hexo g 开始进行部署操作
  • 执行 hexo s 将生成的网页放在本地服务器
  • 打开浏览器，输入网址 http://localhost:4000/ 就可以看到本地的博客效果了
  • 效果没问题，返回终端按 Ctrl + C 中止服务运行

发布博客文章

  • 在Blog路径下执行 hexo new "title"(title 为你的博客的标题)，生成的.md文件路径在 blog\source\_posts下。

  • 打开 title.md ，编辑博客文件。

  • 关闭并保存，执行 hexo g 部署，执行 hexo s 发布，进入 http://localhost:4000/ 查看效果。

在Github上部署Hexo

  • 创建一个名为 username.github.io 的仓库，Github会自动识别为一个网站，其 url 就是 https://username.github.io

  • 复制仓库地址 https://github.com/username/username.github.io.git

  • 修改 Blog 文件夹里的 Blog/_config.yml

    # Site
title: "Tanphoon's Blog"
subtitle: ''
description: ''
keywords:
author: 'Tanphoon'
language: en
timezone: ''

    # URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://username.github.io/
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

    # Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repo: https://github.com/username/username.github.io
branch: main

  • 执行 npm install hexo-deployer-git --save 安装 hexo-deployer-git

  • 执行 hexo g 部署，执行 hexo s 发布

  • 执行 hexo clean hexo d 生成站点文件并推送至远程库。

  • 登录 https://username.github.io 查看效果

参考资料

posted @ 2023-05-13 19:20  Tanphoon  阅读(204)  评论(0)    收藏  举报