个人网站方案之Github+Node.js+Hexo

搭建步骤：

  • 获得个人网站域名（非必选项）

  • 新建Github账号并创建个人仓库

  • 安装Git

  • 安装Node.js

  • 推送网站

  • 绑定域名（非必选项）

  • 更换主题

  • 学习Markdown语法

  • 写作并发布文章

  • 个性化设置

  • giscus评论插件

  • 其他

获得个人网站域名（非必选项）

域名是网站的入口，常见的后缀有com，cn，org等。通过网域名称系统（DNS，Domain Name System）来将域名和IP地址相互映射，使人更方便地访问互联网，而不用去记住能够被机器直接读取的IP地址数串。
申请域名的地方很多，阿里云、腾讯云、华为云等，而申请域名也是本次建站过程中唯一需要花钱的步骤。但是这一步非必选项，也可以用后面的GitHub仓库名。

新建Github账号并创建个人仓库

首先，登录到Github，如果没有Github账号，使用你的邮箱注册。Github.com
其次，点击Github中的New repository创建新仓库，仓库名应该为：username.github.io。username用Github账号名称代替，这是固定写法。
比如这样：截图

安装Git

Git是开源的分布式版本控制系统，用于敏捷高效地处理项目。我们网站在本地搭好后就需要使用Git挂（同）载（布）到著名同性交友网站GitHub上面，而想要了解git的具体操作细节，可以自行查看官方文档。另外在此强烈推荐廖雪峰大大的Git教程。话不多说，Git的下载地址。下载安装后在命令行中输入git，以测试查看是否安装成功。若失败，请使用搜索引擎通过报错来排障；若成功，则需要将你的Git与GitHub账号绑定。步骤如下：

鼠标右键打开Git Bash

image-20210305221048243

设置user.name和user.email的配置信息：

1
2
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

并生成ssh密钥文件：

1
ssh-keygen -t rsa -C "你的GitHub注册邮箱"

然后敲三次回车，默认不需要设置密码。

然后找到生成的.ssh文件夹中的id_rsa.pub密钥，并将内容复制。

image-20210305221529909

打开GitHub->Setting->SSH and GPG keys界面，点击New SSH key

image-20210305221838421

image-20210305221904851

Title为标题，请自行键入即可，下侧Key区域则需要把刚刚复制的id_rsa.pub文件内容粘贴进去，然后点击Add SSH Key。并在Git Bash中验证公钥是否设置成功。输入 ssh git@github.com ：

image-20210305222539014

如上，则配置成功。

安装Node.js

Hexo基于Node.js，Node.js下载地址：Download Node.js。下载并安装后，需要检测Node.js是否安装成功，方式为：在命令行中输入Node -v & npm -v。

image-20210305223127221

至此，Hexo所需环境已全部搭建完成。

推送网站

使用hexo init <folder> 初始化博客项目，hexo g/generate 静态部署，执行hexo s/server即可通过localhost://4000路径查看博客。

修改根目录下***_config.yml***文件

1
2
3
4
deploy:
  type: 'git'
  repo: git@github.com:username/username.github.io.git
  branch: main

通过npm install hexo-deployer-git安装git部署插件，确认网站没问题后使用hexo deploy命令部署至GitHub pages。

绑定域名（非必选项）

购买一个域名后，在域名解析页面下添加(腾讯云为例)：

返回GitHub pages页面，填写对应的custom domain。

image-20240418140905977

更换主题

下载对应主题到hexo项目路径的themes目录下，在根目录***_config.yml***修改：

theme: 想要更换的主题

image-20240418141638608

学习Markdown语法

写作并发布文章

hexo的文章存放在根目录source路径的_posts目录下，是*.md文件，可以使用hexo new <title>命令在 _posts目录下根据根目录下scaffolds文件夹中模板生成一篇新文章；写完后本地静态部署确认无误后，可使用hexo d部署至远程。

一般流程：

1
2
3
4
5
hexo new <title>
hexo clean
hexo g
hexo s
hexo d

个性化设置

修改网页图标：修改根目录下 _config.yml 文件中 favicon 属性

image-20240418144133126

修改个人logo：修改主题目录的 _config.yml 的 logo 属性

image-20240418144350769

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

分享文章

快来参与讨论吧~

本站总访问量次