Github Pages创建自己域名网站

GithubPages

web

发布日期: 2024-01-31

更新日期: 2025-04-02

文章字数: 592

阅读时长: 2 分

阅读次数:

一、准备工作

1.1 注册域名

自行到各个域名注册商注册域名即可，腾讯云，阿里云都支持

1.2 注册github账号

Github账号注册

1.3 安装git环境

根据

二、创建github pages

创建仓库，仓库名称为站点域名 blog.daydayops.com

创建仓库

2.1 创建github pages

仓库–>settings–>pages
创建github pages

2.2 配置域名

配置域名解析blog.daydayops.com CNAME username.github.io

三、基于hexo创建网站

Hexo 是一个基于 Node.js 的静态博客框架，它允许用户使用简单的 Markdown 语法编写文章，并能快速生成静态网页。

3.1 安装hexo

npm install hexo -g

3.2 创建hexo

hexo init daydayops_blog
cd daydayops_blog
npm install

3.3 主题选择

官网有很多主题，这里选择matery
将主题源码clone到themes目录下

cd daydayops_blog/themes
git clone https://github.com/blinkfox/hexo-theme-matery.git

具体详细配置可以参考文章

四、部署

4.1 本地启动

hexo s

访问本地地址http://localhost:4000/

4.2 生成静态文件

hexo g

4.3 配置github上传仓库

安装hexo-deployer-git

npm install hexo-deployer-git --save

修改根目录下的 _config.yml，配置 GitHub 相关信息

deploy:
  type: git
  repo: https://github.com/daydayops/blog.daydayops.com.git
  branch: main
  message: 'hexo deploy'
  token: xxx

其中 token 为 GitHub 的 Personal access tokens，获取方式如下图
Alt text

4.4 上传到github

hexo d

部署完成
Alt text

问题

1. CNAME问题

配置github pages后github默认会在仓库里新增一个CNAME文件，文件里是自己要解析域名，但是每次hexo上传代码后，这个文件就会被覆盖，导致域名解析失败，所以需要手动修改CNAME文件，将域名写入CNAME文件中，这样每次hexo上传代码后，CNAME文件不会被覆盖，域名解析也不会失败。

解决方法

在source目录下创建CNAME文件，文件内容为自己的域名，如blog.daydayops.com。

2. 代码显示问题

hexo7.1.1版本，该主题下代码块显示不正常，网上的多数办法不行

解决方法

在_config.yml文件中添加如下配置：

syntax_highlighter: prismjs
highlight:
  enable: false
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: true
  preprocess: true
  line_number: true
  tab_replace: ''