Github 博客搭建

Github 博客搭建

准备工作

• 准备一个 github 账号
• 建立 github 仓库，仓库名为 username.github.io
• 设置仓库为 public
• clone 仓库，写入一个 index.html 文件，推送到仓库（许多网上的教程会有 choose theme，但是新版本的 github 没有这个东西！）
• 浏览器输入 https://username.github.io 访问！

进阶设置

通过之前的步骤，相信你已经可以访问到你的 blog 了，当然页面非常 丑！

• 前提需要安装 node
• 安装 git

1. 安装 hexo

命令行运行：

# 全局安装
npm install hexo -g
# 局部安装
npm install hexo

# 初始化 (需要空目录进行)
hexo init

# 以本地服务的形式启动 hexo
hexo server

2. 安装 Fluid 主题

1. 下载最新的 Fluid Release 版本 url：https://github.com/fluid-dev/hexo-theme-fluid/releases

2. 解压到 hexo 的 theme 文件夹，并重命名为 fluid

3. 修改 hexo 根目录下的 _config.yaml 文件

   theme: fluid  # 指定主题
   language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改 (不需要重写，前面有，修改即可！)
   

4. 创建关于页

   # 命令
   hexo new page about
   
   # 创建成功后，修改 /source/about/index.html，添加 layout 属性
   ---
   title: about
   date: 2020-02-23 19:20:33
   layout: about
   ---
   
   这里写关于页的正文，支持 Markdown, HTML
   

5. 重新启动

   hexo server
   

6. 不出意外，blog 已经显示成功了

3. 创建文章

1. 如下修改 Hexo 博客目录中的 _config.yml，打开这个配置是为了在生成文章的时候生成一个同名的资源目录用于存放图片文件。

   post_asset_folder: true
   

   执行如下命令创建一篇新文章，名为 test （文章名可以为中文）

   hexo new post test
   

2. 在 source/_post/test 中放一张图片，之后修改 test.md 文章内容如下

   ---
   title: 测试文章
   date: 2023-08-23 21.24:35:20
   tags:
   - 原创
   categories:
   - test
   ---
   
   这是一篇测试文章！
   
   {% asset_img test.png 图片引用方法一 %}
   
   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eKBvd3SX-1692798375819)(test.png)]
   
   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SHBYHKVi-1692798375820)(/images/test.png)]
   

3. 启动并访问

   hexo server
   

4. 个性化定制

1. 浏览器标签页名称

   # 修改根目录下 _config.yml 中的 title 字段。
   # Site
   title: Yuluo's blog
   

2. 博客标题

   # 主题目录 themes\fluid 下 _config.yml 中的 blog_title 字段。
   navbar:
     # 导航栏左侧的标题，为空则按 hexo config 中 `title` 显示
     # The title on the left side of the navigation bar. If empty, it is based on `title` in hexo config
     blog_title: "Yuluo's blog"
   

3. 主页正中间的文字

   # 主题目录 `themes\fluid` 下 `_config.yml` 中的 `text` 字段。
   slogan:
   	enable: true
   
       # 为空则按 hexo config.subtitle 显示
       # If empty, text based on `subtitle` in hexo config
       text: "芝兰生于空谷，不以无人而不芳!"
   

部署到 github pages

有多种方式，这里选择较为简单的一种

推送根目录下的 public 目录到 github 仓库中，访问即可！