使用 GitHub Pages 和 Hexo 以及 Aurora 主题搭建静态个人博客

野性酷女 2023-09-30 08:48 3阅读 0赞

--------------------

title: 使用 GitHub Pages 和 Hexo 以及 Aurora 主题搭建静态个人博客  
date: 2022-03-13 18:12:13  
tags:

*  Hexo
 *  GitHub Pages  
    categories:
 *  其他实践  
    cover: https://cover.png  
    feature: false

--------------------

[**示例站点**][Link 1]

## 1. GitHub Pages ##

GitHub Pages 是一个静态站点托管服务，直接将个人、组织或项目的页面托管于 GitHub 库或仓库 （repository）中

1、新建一个仓库，名为 用户名.github.io

![6fbc3ed3ad0b61b0c39549467d9e98ad.png][]

2、添加一条 `blog` 的二级域名解析记录，需要将域名 CNAME 到 用户名.github.io 的地址，后续即可通过 `blog.xxx.xxx` 访问

![bd402b74b2dc9859bb86b5631c91d98d.png][]

3、进入仓库设置 Pages 页面，添加自定义域名，等待一段时间检验通过后，即可通过自己的域名访问页面

![5afa17982dccc28e017c6fe8cf2f926d.png][]

## 2. [Hexo][] ##

Hexo 是一款基于 Node.js 的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在 GitHub 或 Gitee 上。同时官网有中文说明，可以直接根据官网说明进行搭建

### 2.1 [安装 Node.js][Node.js] ###

### 2.2 [安装 Git][Git] ###

### 2.3 安装 Hexo ###

1. 在安装上面的两个程序后，即可使用 npm 安装 Hexo
 
 npm install -g hexo-cli
2. 新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站
 
 hexo init [folder]
 hexo init Blog
3. 进入创建好的文件夹根目录，以后所有的 Hexo 相关命令操作都在这里进行
 
 cd <folder>
 cd Blog
 
 ![59df2bc21a406382289e5b486de4778d.png][]
4. 创建一个 source/name/index.md 文件，source 是存放用户资源的地方，博客文件放在该目录下
 
 hexo new page <name>
5. 清除缓存文件 (db.json) 和已生成的静态文件 (public)
 
 hexo clean
6. 安装 hexo-deployer-git，用于部署
 
 npm install hexo-deployer-git --save
7. 部署网站
 
 hexo d

**一般部署网站，使用 hexo clean 然后再 hexo d 即可。**

## 3. 使用 [Aurora][] 主题 ##

1.  在控制台中，进入 Hexo 项目的根目录，然后运行以下命令安装主题
    
        npm install hexo-theme-aurora --save
2.  在 node\_modules 目录下的 hexo-theme-aurora 主题文件夹中复制 \_config.yml 文件到根目录下，并重命名为 \_config.aurora.yml
    
    ![2f7a67cd993896df4c8170bd85067c4c.png][]
    
    ![668ea7893ce258b9ecc44714398eec06.png][]
3.  到这里一共有两个配置文件，一个是 Hexo 自身的配置，一个是主题专用的配置
    
    > . \# Hexo 项目根目录.  
    > ├─ \_config.yml \# Hexo 配置文件  
    > └─ \_config.aurora.yml \# 主题配置

### 3.1 Hexo配置文件 \_config.yml ###

1.  设置 url 和 permalink  
    url 为自己的博客地址，permalink 参数为 /post/:title.html
    
        # URL
        ## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
        url: https://blog.fan223.cn
        permalink: /post/:title.html
        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
2.  设置代码高亮  
    关闭 Highlight，设置 enable 为 false。使用 prismjs，设置 enable 为 true，将 preprocess 设置为 false
    
        highlight:
          enable: false
          line_number: true
          auto_detect: false
          tab_replace: ''
          wrap: true
          hljs: false
        prismjs:
          enable: true
          preprocess: false
          line_number: true
          tab_replace: ''
3.  设置主题
    
        # Extensions
        ## Plugins: https://hexo.io/plugins/
        ## Themes: https://hexo.io/themes/
        theme: Aurora
4.  设置部署仓库
    
        # Deployment
        ## Docs: https://hexo.io/docs/one-command-deployment
        deploy:
          type: git
          repo: git@github.com:Fan223/Fan223.github.io.git
          branch: main

### 3.2 主题配置文件 \_config.aurora.yml ###

#! ---------------------------------------------------------------
 #! Aurora Theme for Hexo
 #! ---------------------------------------------------------------
 #! Designed & Coded By TriDiamond
 #! ---------------------------------------------------------------
 
 #! ---------------------------------------------------------------
 #! Site Configs
 #！ @docs https://aurora.tridiamond.tech/guide/configuration.html
 #! ---------------------------------------------------------------
 site:
 # 博客子标题，页面主标题后面会跟随这个标题内容。
 subtitle: Fan's Blog
 author: 凡
 # 博客子名字，会在 header 的 logo 下方显示
 nick: Fan
 description:
 link: '/'
 language: cn
 # 开启博客的多语言支持
 multi_language: true
 # Logo 的图片链接 image
 logo: https://img-blog.csdnimg.cn/20210313122054101.png
 # 头像的图片链接 image
 avatar: https://img-blog.csdnimg.cn/20210313122054101.png
 # 备案信息
 beian:
 number: ''
 link: ''
 police_beian:
 number: ''
 link: ''
 
 #! ---------------------------------------------------------------
 #! Authors Configs
 #！ @docs https://aurora.tridiamond.tech/guide/authors.html
 #! ---------------------------------------------------------------
 authors:
 ##! example
 # TriDiamond:
 # name: TriDiamond
 # avatar: https://up.enterdesk.com/edpic_source/44/ff/3d/44ff3d6bd2819d524facfcc33205d4cd.jpg
 # link: https://github.com/TriDiamond
 # description: 'Think like an artist, code like an artisan.'
 # socials:
 # github: https://tridiamond.tech
 
 #! ---------------------------------------------------------------
 #! Menu Configs
 #！ @docs https://aurora.tridiamond.tech/guide/menu.html
 #! ---------------------------------------------------------------
 menu:
 About: false
 about: 
 name: 'About'
 i18n:
 cn: '关于'
 en: 'About'
 path: '/page/about'
 Tags: true
 Archives: true
 # 自定义菜单, 外部链接
 message-board:
 name: '留言板'
 i18n:
 cn: '留言板'
 en: 'Message Board'
 path: '/page/message-board'
 # 多级 projects 菜单配置
 projects:
 name: '链接'
 i18n:
 cn: '链接'
 en: 'Link'
 children:
 Fan:
 name: '凡'
 i18n: 
 cn: '凡'
 en: 'Fan'
 path: 'https://github.com/Fan223/Fan223.github.io'
 Email:
 name: '邮件'
 i18n:
 cn: '邮件'
 en: 'Mail Me'
 path: 'mailto:fanj.zh@foxmail'
 my:
 name: '我的'
 il8n:
 cn: '我的'
 en: 'My'
 path: '/page/my'
 
 #! ---------------------------------------------------------------
 #! Theme Config
 #! @docs https://aurora.tridiamond.tech/guide/theme.html
 #! ---------------------------------------------------------------
 theme:
 # 深色模式 true、false、auto
 dark_mode: true
 # 头像形状
 profile_shape: diamond # support `circle`, `diamond`, `rounded`
 # 推荐文章
 feature: true
 # 渐变颜色
 gradient:
 color_1: '#24c6dc'
 color_2: '#5433ff'
 color_3: '#ff0099'
 
 #! ---------------------------------------------------------------
 #! Social Configs
 #! @docs https://aurora.tridiamond.tech/guide/social.html
 #! ---------------------------------------------------------------
 
 # 社交链接
 socials:
 github: 'https://github.com/Fan223'
 twitter: ''
 stackoverflow: ''
 weibo: 'https://weibo.com/u/7318914058'
 zhihu: 'https://www.zhihu.com/people/tridiamond'
 csdn: 'https://blog.csdn.net/ACE_U_005A'
 juejin: 'https://juejin.cn/user/1873223546578589'
 # 自定义社交连接
 customs:
 ##! Example:
 ##! --- Using SVG
 bilibili:
 icon: http://localhost:4000/svg/bilibili.svg
 link: https://live.bilibili.com/22619211
 
 ##! --- Using IconFont
 baidu:
 icon: iconfont icon-baidu
 link: https://live.bilibili.com/22619211
 
 ##! --- Using FontAwesome
 book:
 icon: far fa-address-book
 link: https://live.bilibili.com/22619211
 
 #! ---------------------------------------------------------------
 #! Site Meta Configs
 #! @docs https://aurora.tridiamond.tech/guide/theme.html
 #! ---------------------------------------------------------------
 
 # 网页META
 site_meta:
 cdn: cn
 favicon:
 # 对站点的描述
 description: 'Fan'
 # 网站的关键词
 keywords: 'Java, Blog'
 # 网站作者
 author: '凡'
 
 #! ---------------------------------------------------------------
 #! Plugins
 #! @docs https://aurora.tridiamond.tech/guide/plugins.html
 #! ---------------------------------------------------------------
 
 # For local development only!
 gitalk:
 enable: true
 autoExpand: true
 clientID: '2a249d7d9c6b2c8634ef'
 clientSecret: '31b0f1d47f77f962ed6d5cf1be6aede282293f2d'
 repo: 'blogtalk'
 owner: 'Fan223'
 admin: ['Fan223']
 id: uid
 language: cn
 distractionFreeMode: true
 recentComment: true
 proxy: ''
 
 # Valine comment plugin (recommended!)
 # see https://valine.js.org/quickstart.html
 valine:
 enable: false
 app_id:
 app_key:
 avatar: ''
 placeholder: Leave your thoughts behind~
 visitor: true
 lang: en
 avatarForce: false
 meta: ['nick', 'mail']
 requiredFields: []
 admin: 'TriDiamond'
 recentComment: true
 
 # Enable Busuanzi statistic plugin
 # see http://ibruce.info/2015/04/04/busuanzi/
 busuanzi:
 enable: true
 
 copy_protection:
 enable: false
 author:
 cn: 凡
 en: Fan
 link:
 cn: 本文来自于
 en: Article is from
 license:
 cn: 博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议
 en: This content is shared under the CC BY-NC-SA 4.0 protocol (Non-Commercial)
 
 #! ---------------------------------------------------------------
 #! Enable Aurora Bot Dia
 #! @docs https://aurora.tridiamond.tech/guide/site-meta.html#custom-meta
 #! ---------------------------------------------------------------
 # 开启 Aurora 机器人 Dia
 aurora_bot:
 # ======================================================
 # 设置为 true，你可爱的机器人就会启动。
 # ======================================================
 enable: false
 # ======================================================
 # 该机器人支持两种语言
 # -- en: 英语
 # -- cn: 中文
 # ======================================================
 locale: en
 # ======================================================
 # 目前只支持使用 Dia，将来会支持 live2d。
 # ======================================================
 bot_type: dia
 
 # 这个技巧是用来对用户交互做出反应的
 tips:
 # ======================================================
 # 这些是 Dia 每30秒会说的随机消息。
 # ======================================================
 messages:
 - 你好，我是 Dia，好高兴遇见你～
 - 好久不见，日子过得好快呢……
 - '大坏蛋！你都多久没理人家了呀，嘤嘤嘤～'
 - 嗨～快来逗我玩吧！
 - 拿小拳拳锤你胸口！
 - 学习使我们快乐，快乐使我们更想学习～
 - 你知道吗？你可以点击我返回页面顶部哦！～
 # 这是一个特殊的函数，它将触发 quotes API
 # 和 Dia 会说出每日引用的信息。
 - showQuote
 
 # ======================================================
 # 将在用户打开浏览器控制台时触发。
 # ======================================================
 console: 哈哈，你打开了控制台，是想要看看我的小秘密吗？
 
 # ======================================================
 # 当用户从你的博客上复制内容时触发。
 # ======================================================
 copy: 你都复制了些什么呀，转载要记得加上出处哦！
 
 # ======================================================
 # 这将在用户返回窗口时触发。
 # ======================================================
 visibility_change: 老朋友，你怎么才回来呀～
 
 # ======================================================
 # 欢迎留言，号码是一天中的时间。
 # -----------------------------------
 # eg: 24 = 00:00 也就是午夜
 # eg: 17-19 = 在下午 5 点到 7 点之间
 # -----------------------------------
 # 在一天的这段时间里，Dia 会向你的读者问好
 # 与相应的消息。
 # ======================================================
 welcome:
 '24': 你是夜猫子呀？这么晚还不睡觉，明天起的来嘛？
 '5_7': 早上好！一日之计在于晨，美好的一天就要开始了。
 '7_11': 上午好！工作顺利嘛，不要久坐，多起来走动走动哦！
 '11_13': 中午了，工作了一个上午，现在是午餐时间！
 '13_17': 午后很容易犯困呢，今天的运动目标完成了吗？
 '17_19': 傍晚了！窗外夕阳的景色很美丽呢，最美不过夕阳红～
 '19_21': 晚上好，今天过得怎么样？
 '21_23':
 - 已经这么晚了呀，早点休息吧，晚安～
 - 深夜时要爱护眼睛呀！
 
 # ======================================================
 # 当用户来自搜索引擎时使用。
 # ======================================================
 referrer:
 # 用户来自你自己的网站。
 self: 欢迎来到「[PLACEHOLDER]」
 # 用户来自百度搜索引擎。
 baidu: Hello！来自 百度搜索 的朋友 你是搜索 「[PLACEHOLDER]」 找到的我吗？
 # 用户来自360搜索引擎。
 so: Hello！来自 360搜索 的朋友 你是搜索 「[PLACEHOLDER]」 找到的我吗？
 # 用户来自谷歌搜索引擎。
 google: Hello！来自 谷歌搜索 的朋友 欢迎阅读「[PLACEHOLDER]」
 # 用户来自另一个网站。
 site: Hello！来自 [PLACEHOLDER] 的朋友
 # 任何其他来源。
 other: 感谢您阅读： 「[PLACEHOLDER]」
 
 # ======================================================
 # 当你的'鼠标悬停'到特定的HTML标签，Dia将
 # 给用户留言帮助他们解决问题。
 # ------------------------------------------------------
 # selector: 标签选择器(你可以使用任何css选择器)
 # text: 这是Dia将要传达的信息。(如果你想要的
 # Dia从一组信息中随机说出一个，设置它
 # 数组，否则只是纯文本)
 # ======================================================
 mouseover:
 # 悬浮在 Dia 上
 - selector: '#Aurora-Dia'
 text:
 - 哇啊啊啊啊啊啊... 你想干嘛? O.O
 - 请您轻一点，我是很昂贵的机器人哦! O.O
 - '领导，我在呢! 我有什么可以帮到你呢? O.O'
 # 悬浮在 Home 菜单
 - selector: "[data-menu='Home']"
 text:
 - 点击前往首页，想回到上一页可以使用浏览器的后退功能哦。
 - 点它就可以回到首页啦！
 - 回首页看看吧。
 # 悬浮在 About 菜单
 - selector: "[data-menu='About']"
 text:
 - 你想知道我家主人是谁吗？
 - 这里有一些关于我家主人的秘密哦，要不要看看呢？
 - 发现主人出没地点！
 # 悬浮在 Archives 菜单
 - selector: "[data-menu='Archives']"
 text:
 - 这里存储了主人的所有作品哦！
 - 想看看主人的图书馆吗？
 # 悬浮在 Tags 菜单
 - selector: "[data-menu='Tags']"
 text:
 - 点击就可以看文章的标签啦！
 - 使用标签可以更好的分类你的文章哦～
 # 悬浮在 language 菜单
 - selector: "[data-dia='language']"
 text: 主人的博客支持多种语言。
 # 悬浮在黑白切换按钮上
 - selector: "[data-dia='light-switch']"
 text: 您可以点击这里切换黑白模式哦！
 # 悬浮在作者简介上
 - selector: "[data-dia='author']"
 text:
 - 这是我主人的简介。
 - 点击其中任何一个链接都可以传送到我主人的其他世界。
 # 悬浮在作跳转评论按钮上
 - selector: "[data-dia='jump-to-comment']"
 text:
 - 你想看看评论吗?
 - 点击这里可以帮助你直接跳转到评论部分。
 
 # ======================================================
 # 当你的'鼠标点击'为特定的HTML标签，Dia将
 # 给用户留言帮助他们解决问题。
 # ------------------------------------------------------
 # 属性与' moveover '事件相同
 # ======================================================
 click:
 # 鼠标点击搜索按钮
 - selector: "[data-dia='search']"
 text:
 - 没有看到你想要的文章，那么就输入你想搜索的关键词吧～
 - 可以使用 ctrl/cmd + k 快捷键打开搜索哦～
 # 鼠标点击文章标题
 - selector: "[data-dia='article-link']"
 text:
 - 希望你会喜欢这篇文章：「{
 text}」.
 - 您的选择真的不错哦！好好享受这篇文章吧～
 - 希望您能从 「{
 text}」这篇文章中学到点东西。
 # 鼠标点击跳转评论输入框（Gitalk）
 - selector: '.gt-header-textarea'
 text:
 - 要吐槽些什么呢？
 - 一定要认真填写喵～
 - 有什么想说的吗？
 - 如果觉得文章不错的话，就给博主留个言吧～
 # 鼠标点击跳转评论输入框（Valine）
 - selector: '.veditor'
 text:
 - 要吐槽些什么呢？
 - 一定要认真填写喵～
 - 有什么想说的吗？
 - 如果觉得文章不错的话，就给博主留个言吧～
 
 # ======================================================
 # 在特定的日期，Dia会向你的读者问候。
 # ------------------------------------------------------
 # date: 特别活动的日期(格式:月/日或月/日-月/日)
 # text:
 # ---只使用一个简单的字符串。
 # -——消息的随机集合，使用数组配置格式。
 # ======================================================
 events:
 - date: 01/01
 text: '元旦了呢，新的一年又开始了，今年是{year}年～'
 - date: 02/14
 text: 又是一年情人节，{
 year}年找到对象了嘛～
 - date: 03/08
 text: 今天是国际妇女节！
 - date: 03/12
 text: 今天是植树节，要保护环境呀！
 - date: 04/01
 text: 悄悄告诉你一个秘密～今天是愚人节，不要被骗了哦～
 - date: 05/01
 text: 今天是五一劳动节，计划好假期去哪里了吗～
 - date: 06/01
 text: '儿童节了呢，快活的时光总是短暂，要是永远长不大该多好啊…'
 - date: '09/03'
 text: '中国人民抗日战争胜利纪念日，铭记历史、缅怀先烈、珍爱和平、开创未来。'
 - date: '09/10'
 text: '教师节，在学校要给老师问声好呀～'
 - date: 10/01
 text: '国庆节到了，为祖国母亲庆生！'
 - date: 11/05-11/12
 text: 今年的双十一是和谁一起过的呢～
 - date: 12/20-12/31
 text: 这几天是圣诞节，主人肯定又去剁手买买买了～
 
 #! ---------------------------------------------------------------
 #! Injections
 #! @docs https://aurora.tridiamond.tech/guide/site-meta.html#custom-meta
 #! ---------------------------------------------------------------
 
 # 自定义 Meta, 自定义 Script 或 CSS 链接添加到主题中
 injects:
 scripts:
 - <script src="https://cdn.jsdelivr.net/gh/Fan223/live2d-widget@latest/autoload.js"></script>
 css:
 - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

然后执行 hexo clean & hexo d 即可部署到 GitHub 上，然后通过地址访问

### 3.3 添加 CNAME 文件 ###

需要注意的是每次 hexo 重新部署后，会清除原来的仓库，前面在仓库设置的 Pages 里自定义的域名信息也会清除掉，因此需要在 source 目录下添加一个 CNAME 文件，加上自己的域名，这样每次重新部署就会再添加自己的域名信息

其实就是仓库里的这个 CNAME 文件

![5839ef1f72efb85928f31bf64638104a.png][]

![6dcbb0995dec8136e58bcdefd9960e7d.png][]

[Link 1]: https://blog.fan223.cn
[6fbc3ed3ad0b61b0c39549467d9e98ad.png]: https://img-blog.csdnimg.cn/img_convert/6fbc3ed3ad0b61b0c39549467d9e98ad.png
[bd402b74b2dc9859bb86b5631c91d98d.png]: https://img-blog.csdnimg.cn/img_convert/bd402b74b2dc9859bb86b5631c91d98d.png
[5afa17982dccc28e017c6fe8cf2f926d.png]: https://img-blog.csdnimg.cn/img_convert/5afa17982dccc28e017c6fe8cf2f926d.png
[Hexo]: https://hexo.io/zh-cn/docs/
[Node.js]: https://blog.csdn.net/ACE_U_005A/article/details/123409708
[Git]: https://blog.csdn.net/ACE_U_005A/article/details/122704934
[59df2bc21a406382289e5b486de4778d.png]: https://img-blog.csdnimg.cn/img_convert/59df2bc21a406382289e5b486de4778d.png
[Aurora]: https://aurora.tridiamond.tech/zh/
[2f7a67cd993896df4c8170bd85067c4c.png]: https://img-blog.csdnimg.cn/img_convert/2f7a67cd993896df4c8170bd85067c4c.png
[668ea7893ce258b9ecc44714398eec06.png]: https://img-blog.csdnimg.cn/img_convert/668ea7893ce258b9ecc44714398eec06.png
[5839ef1f72efb85928f31bf64638104a.png]: https://img-blog.csdnimg.cn/img_convert/5839ef1f72efb85928f31bf64638104a.png
[6dcbb0995dec8136e58bcdefd9960e7d.png]: https://img-blog.csdnimg.cn/img_convert/6dcbb0995dec8136e58bcdefd9960e7d.png