51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

GitHub + Hexo 搭建个人博客网站

一、准备工作 {#一、准备工作}

1. GitHub + Hexo 的优势 {#1-GitHub-Hexo-的优势}

Hexo 提供现成的模板和模块;githubpages 功能提供免费的服务器,零成本搭建属于自己的博客。

2. 需要了解的网站 {#2-需要了解的网站}

  • github,开源代码托管网站,需要我们去注册一个账号。
  • hexo,一个快速、简洁且高效的博客框架,需要我们去提前了解一些搭建文档。
  • git,本地安装 git 工具,实现代码提交和推送。
  • nodejs,本地安装 nodejsHexo 基于 nodejs 编写的。

以上软件的安装,请自行搜索

二、github 上创建仓库 {#二、github-上创建仓库}

1. 新建仓库 {#1-新建仓库}

image

2. 填写地址 {#2-填写地址}

仓库名称为 <用户名>.github.io,勾上 Add a README file
image

提示,用户名为你自己的 github 帐号,见下图。
image

3. 访问 {#3-访问}

访问地址 https://<用户名>.github.io,如图则说明创建成功。
image

三、本地安装 Hexo,生成博客模板 {#三、本地安装-Hexo,生成博客模板}

1. 安装 Hexo {#1-安装-Hexo}

打开cmd,执行

|-----------|---------------------------------| | 1 | npm install -g hexo-cli |


查看 Hexo 版本

|-----------|-----------------| | 1 | hexo -v |


执行结果如下

|---------------------|--------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 | PS C:\Users\Administrator> hexo -v hexo-cli: 4.3.0 os: win32 10.0.25217 node: 14.21.1 v8: 8.4.371.23-node.87 ... |


2. 创建本地博客 {#2-创建本地博客}

切换到工作区域文件夹下,执行

|-----------|-------------------------------| | 1 | hexo init github-blog |


执行结果如下

|-------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 | PS D:\workspace\blog> hexo init github-blog INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git INFO Install dependencies ... 22 packages are looking for funding run `npm fund` for details found 0 vulnerabilities INFO Start blogging with Hexo! |


然后初始化

|-------------|------------------------------| | 1 2 | cd github-blog npm i |


安装好后运行,执行

|-------------|----------------------------| | 1 2 | hexo g hexo server |


执行结果

|------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 | PS D:\workspace\blog\github-blog> hexo g INFO Validating config INFO Start processing INFO Files loaded in 141 ms INFO Generated: archives/index.html ··· INFO 17 files generated in 349 ms PS D:\workspace\blog\github-blog> hexo server INFO Validating config INFO Start processing INFO Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop. INFO Have a nice day |


浏览器打开 http://localhost:4000/ 预览,如下图
image

四、提交本地博客至 github 仓库 {#四、提交本地博客至-github-仓库}

有两种方式

1. 利用 Hexo 的部署插件 {#1-利用-Hexo-的部署插件}

安装 hexo-deployer-git

|-----------|------------------------------------------| | 1 | npm install hexo-deployer-git -D |


安装完之后修改根目录的 _config.yml 文件,拉到最下面,增加远程仓库地址(自己的),记得保存(ctrl + s)。

|-----------------|-----------------------------------------------------------------------------------------| | 1 2 3 4 | deploy: type: git repo: git@github.com:weizwz/weizwz.github.io.git branch: main |


提示,远程仓库地址选择 ssh 的,如下图,HTTPS 的貌似还需要 token(主要是我加完token也没成功。。。)
image

部署到GitHub

|-----------|-------------------| | 1 | hexo g -d |


执行成功后,查看 github 代码仓是否更新,查看博客地址页面。
image

2. 直接将 public 目录中的文件和目录推送至 gitHub 仓库 {#2-直接将-public-目录中的文件和目录推送至-gitHub-仓库}

可参考我的博客 Git使用记录 - 持续更新 - 将本地项目关联到远程仓库。
记得是 public 目录,不是整个项目。如果你把整个项目推送了过去,记得回退。

五、主题配置 {#五、主题配置}

github 上搜索 Hexo theme,选择自己喜欢的主题,最好选择有详细文档的,这样安装比较方便。以我选择的 hexo-theme-butterfly 为例,具有 Demo 演示和详情的文档说明,只需按照文档来安装和配置即可。
参照 安装文档 进行安装配置,基础效果如下
image
按照文档进行其他配置,最后推送至远端仓库即可。

然后开始写作欣赏你自己的博客吧!

赞(0)
未经允许不得转载:工具盒子 » GitHub + Hexo 搭建个人博客网站