devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

白嫖 GitHub Pages，轻松搭建个人博客_使用github pages搭建个人主页or博客网站

作者：不正经 | 2024-05-21 03:20:32

赞

踩

使用github pages搭建个人主页or博客网站

Hexo 是一个快速、简单且功能强大的博客框架。使用 Markdown 解析文档，Hexo 能在几秒内生成带有自定义主题并集成各项功能的网站页面。

本文采用 Github Pages + Hexo 的方式，搭建个人博客。

零、准备工作

1. 使用个人 GitHub 创建仓库，并配置 GitHub Pages

注意：此仓库用于存放个人博客页面，仓库名必须使用 <GitHub用户名>.github.io 格式。

仓库创建完成后，可以在仓库根路径下创建一个名为 index.html 的静态 HTML 文件来验证个人博客搭建是否成功。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Someone's Blog</title>
  6. </head>
  7. <body>
  8.     <h1>Hello, Blog World ~</h1>
  9. </body>
  10. </html>
  11.

在 <GitHub用户名>.github.io 仓库对应的 GitHub Pages 设置页面 (访问路径为 Settings -> Pages) 可以找到个人博客的主页访问地址：https://<GitHub 用户名>.github.io。

若能在浏览器中正常访问该地址，即代表个人 GitHub Pages 搭建成功。

2. 安装 Git 和 NodeJS

Hexo 基于 NodeJS 运行，因此在开始前，需要安装 NodeJS 和 npm 工具。安装教程可参考如下步骤。

笔者的本地环境为 Windows 11 + PowerShell，包管理工具使用 Scoop，NodeJS 通过 nvm 管理，下述安装步骤需要在 PowerShell 里执行。

  1. scoop install git # 安装Git
  2.  
  3. scoop install nvm # 安装 nvm
  4. nvm list available # 查看可用的 NodeJS 版本，这里建议使用 LTS 版本
  5. nvm install 16.18.0 # 安装 NodeJS，我这里安装的是最新 LTS 版本 16.18.0
  6. sudo nvm use 16.18.0 # NodeJS 版本使用 16.18.0，注意这里需要管理员权限，可以先使用 scoop 安装 sudo 这个工具
  7.

一、安装 Hexo

此处只列出本次所需的关键步骤，更多说明详见官方文档：https://hexo.io/zh-cn/

1. 全局安装 hexo-cli 工具

  1. npm install -g hexo-cli
  2.  
  3. hexo -v # 查看版本，目前最新版本为 4.3.0
  4.

2. 创建一个项目 my-blog 并初始化

  1. hexo init my-blog
  2. cd my-blog
  3. npm install
  4.

3. 生成网页文件 & 本地启动

  1. hexo generate # 生成页面，此命令可以简写为 `hexo g`
  2. hexo server # 本地启动，可简写为 `hexo s`
  3.

通过 hexo g 生成的页面文件在项目 public 目录下；

使用 hexo clean 命令可以清理生成的页面文件。当配置未生效时，建议执行清理命令。

4. 本地访问

浏览器访问：http://localhost:4000/ 会看到一个比较简陋的页面。没关系，接下来介绍如何更换主题。

二、安装 & 配置主题

按照前两个小节所介绍的步骤，我们已经能够通过本地访问博客页面了，但 Hexo 默认的主题不太好看。

好在官方提供了数百种主题任君选择，可以根据个人喜好更换，具体可以点击 (https://hexo.io/themes/) 查看。

本文将主要介绍 Fluid 主题的安装与配置。

1. 安装 Fluid 主题

官方提供了两种安装方式，这里使用官方推荐的 npm 方式。

  1. npm install --save hexo-theme-fluid
  2.

在博客根路径下创建 _config.fluid.yml 文件，并将主题的 ./node_modules/hexo-theme-fluid/_config.yml 文件内容复制过去。

2. 指定主题

将如下修改应用到 Hexo 博客目录中的 _config.yml:

  1. theme: fluid  # 指定主题
  2.  
  3. language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改
  4.

3. 创建「关于页」

首次使用主题的「关于页」需要手动创建。

  1. hexo new page about
  2.

创建成功后修改 /source/about/index.md，添加 layout 属性。修改后的文件示例如下：

  1. ---
  2. title: 标题
  3. layout: about
  4. ---
  5. 这里写关于页的正文，支持 Markdown, HTML
  6.

需要注意的是， layout: about 必须存在，并且不能修改成其他值，否则不会显示头像等样式。

4. 更新 Fluid 主题

通过 npm 安装主题的情况，可在博客目录下执行命令：

  1. npm update --save hexo-theme-fluid
  2.

5. 本地启动

执行如下命令重新生成页面，并启动 Hexo 服务。

  1. hexo clean
  2. hexo g
  3. hexo s
  4.

再次通过浏览器访问 http://localhost:4000 , 便可以看到页面变得美观多了。

三、创建文章

修改 _config.yml 文件。这项配置是为了在生成文章的同时，生成一个同名的资源目录用于存放图片等资源文件。

  1. post_asset_folder: true
  2.

创建文件名为 my-blog-build-remark 文章。

  1. hexo new post my-blog-build-remark
  2.

设置文章的标题及其他元数据信息。

  1. ---
  2. title: 基于 GitHub Pages + Hexo 搭建个人博客
  3. date: 2022-10-16 19:42:53
  4. tags: ['hexo','fluid']
  5. ---
  6.

如上命令执行成功后，在 source/_posts/ 目录下生成了一个 Markdown 文件和一个同名的资源目录。

在 source/_posts/my-blog-build-remark 目录中放置一个图片文件 posts-file-tree.png，整体目录结构如下：

  1. $ source/_posts (main)> tree
  2. .
  3. ├── hello-world.md
  4. ├── my-blog-build-remark
  5. │   └── posts-file-tree.png
  6. └── my-blog-build-remark.md
  7.

然后在文章的 Markdown 文件里，通过以下方式即可引用对应的图片。

  1. {% asset_img posts-file-tree.png 目录结构 %}
  2.

图片的引用方式也不只一种，更多详细介绍可参考官方文档 (https://hexo.io/zh-cn/docs/asset-folders.html)。

文章创建并编辑好之后，就可以通过 hexo g && hexo s 命令启动服务，并在本地预览文章。

四、配置指南

如无特殊说明，如下配置文件一律默认为主题配置文件_config.fluid.yml。

1. 页面 title 修改

修改 _config.yml 文件。

  1. title: "请填写你自己的博客标题"
  2. subtitle: ''
  3. description: ''
  4. keywords:
  5. author: 请填写你自己的署名
  6. language: zh-CN
  7. timezone: ''
  8.

2. 博客标题

页面左上角的博客标题，默认使用站点配置_config.yml 中的 title。此配置同时控制着网页在浏览器标签中的标题，如需单独区别设置，可在主题配置中进行设置。

  1. navbar:
  2.   blog_title: "请填写你自己的博客标题"
  3.

3. 首页 - Slogan（打字机）

首页大图中的标题文字，可在主题配置中设定是否开启。这里支持配置固定的 text 或者从远程 api 实时获取，优先级 api > text。

  1. index:
  2.   slogan:
  3.     enable: true
  4.  
  5.     text: "Please type your slogan here."
  6.     api:
  7.       enable: true
  8.       url: "https://v1.hitokoto.cn/"
  9.       method: "GET"
  10.       headers: {}
  11.       keys: ["hitokoto"]
  12.

五、网页访问统计

目前 Fluid 支持多种统计网站，本文仅介绍 LeanCloud 的配置。

使用 LeanCloud 之前，需要先注册账户并新建应用（需实名认证），可自行前往官网完成。

在 【控制台 -> 应用 -> 设置 -> 应用凭证】页面中找到对应的 AppID、AppKey、REST API 服务器地址等信息填入主题配置中。

  1. web_analytics:  # 网页访问统计
  2.   leancloud:
  3.     app_id: # AppID
  4.     app_key: # AppKey
  5.     # REST API 服务器地址，国际版不填
  6.     # Only the Chinese mainland users need to set
  7.     server_url: # REST API 服务器地址
  8.  
  9.     # 开启后不统计本地路径( localhost 与 127.0.0.1 )
  10.     # If true, ignore localhost & 127.0.0.1
  11.     ignore_local: true
  12.

如无特殊需要，记得配置 ignore_local: true，这样 LeanCloud 在 localhost 域名下访问不会增加数据。

1. 展示 PV 与 UV 统计

页脚可以展示 PV 与 UV 统计数据，目前支持两种数据来源：LeanCloud 与 不蒜子。

  1. footer:
  2.   statistics:
  3.     enable: true
  4.     source: "leancloud"
  5.     pv_format: "总访问量 {} 次"
  6.     uv_format: "总访客数 {} 人"
  7.

2. 展示文章日期 / 字数 / 阅读时长 / 阅读数

  1. post:
  2.   meta:
  3.     author: # 作者，优先根据 front-matter 里 author 字段，其次是 hexo 配置中 author 值
  4.       enable: false
  5.     date: # 文章日期，优先根据 front-matter 里 date 字段，其次是 md 文件日期
  6.       enable: true
  7.       format: "LL a" # 格式参照 ISO-8601 日期格式化 See: http://momentjs.cn/docs/#/parsing/string-format/
  8.     wordcount: # 字数统计
  9.       enable: true
  10.       format: "{} 字"
  11.     min2read: # 估计阅读全文需要的时长
  12.       enable: true
  13.       awl: 2
  14.       wpm: 60
  15.       format: "{} 分钟"
  16.     views: # 浏览量计数
  17.       enable: true
  18.       source: "leancloud"
  19.       format: "{} 次"
  20.

3. 文章评论功能

评论功能需要在主题配置中开启并指定评论插件，这里使用基于 LeanCloud 的 Valine。

  1. post:
  2.   comments:
  3.     enable: true
  4.     # 指定的插件，需要同时设置对应插件的必要参数
  5.     # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus
  6.     type: valine
  7.  
  8. # Valine
  9. # 基于 LeanCloud
  10. # See: https://valine.js.org/
  11. valine:
  12.   appId: # LeanCloud AppID
  13.   appKey: # LeanCloud AppKey
  14.

六、发布 GitHub Pages

1. 安装 hexo-deployer-git。

  1. npm install hexo-deployer-git --save
  2.

2. 修改站点配置 _config.yml。

  1. deploy:
  2.   type: git
  3.   repo: <repository url> # https://github.com/<GitHub用户名>/<GitHub用户名>.github.io.git
  4.   branch: [branch]
  5.   token: [token]
  6.

3. 生成站点文件并推送至远程 GitHub 仓库。

  1. hexo clean
  2. hexo deploy
  3.

登入 Github，在库设置（Repository Settings）中将默认分支设置为 _config.yml 配置中的分支名称。

只需稍等片刻，个人博客站点就会显示在 Github Pages 中。

七、参考资料

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/600587
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号