教程-基于github+hexo创建个人主页

    本教程制作于2022年1月20日，使用windows 10 + hexo 5.4.0 + git 2.34.1.windows.1，可能受到版本更新影响而失效，特此注明。

0.安装环境

    需要安装：Git/node.js/hexo/任意一款markdown文件编辑器
    可选配置：VPN软件
    参考以下链接以进行安装：https://blog.csdn.net/weixin_41922289/article/details/95639870

1.建立个人主页

1.1 使用默认主题(不是必须步骤)

    参考https://www.dazhuanlan.com/shanbo87/topics/1420718，建立一个格式为
<github username>.github.io
    的仓库。
    找到这个仓库的settings页，在侧边栏中选择Pages，可以进行更多设置。

    尽管不使用默认主题，但仍然需要创建这一仓库以容纳个人主页内容。

1.2 使用hexo主题

这部分参考了

1. https://github.com/V-Vincen/hexo-theme-livemylife/blob/master/README_CN.md
2. https://blog.csdn.net/heimu24/article/details/81209539
3. https://www.cnblogs.com/zhengqing/p/11150687.html

     1.2.1 hexo主题站

    在https://hexo.io/themes/可以查找hexo主题。

     1.2.2 通过git下载中意的主题

    hexo安装完成后，使用命令
hexo init blog
    在当前目录创建一个名为blog的文件夹。

    在git bash中cd到用于存放博客工程文件的文件夹（比如上一步的blog），使用命令
git clone <git文件URL>
    获取资源。

    1.2.3 修改主题设置

    1.2.4 推送到github

建议参考https://github.com/V-Vincen/hexo-theme-livemylife/blob/master/README_CN.md使用。
本文档提供了一些推送到github时的疑难问题解答。

    使用命令
npm install hexo-github-deployer
    安装推送插件。

    在blog工程文件夹内找到
_config.yml文件。修改其deploy部分。

    完成后，使用（注意此时目录位置）
hexo generate
    命令生成可推送内容（存放在自动创建的public文件夹中）。

    完成后，推荐在本地端口检查生成好的页面。使用命令
hexo server
    打开本地服务器。使用浏览器进入hexo默认位置
localhost:4000
检查页面内容。确认无误后，使用
hexo deploy
    命令，将整个页面推送至_config.yml文件中指定的github仓库位置。这之后，在浏览器输入
<github username>.github.io ，就可以访问你的个人主页了。

推送成功时的截图

     1.2.5 建立主页时的疑难解答

     A. 第一次使用Git时，需要登录Github账号。
     参考：

https://www.cnblogs.com/yelanggu/p/11004716.html
或
https://www.cnblogs.com/crazytata/p/10083716.html

     以修复此问题。链接二的教程进行到步骤十即足够。

     B. 推送到Github失败。

上图分别显示开启或关闭梯子时，未能推送成功的情况。

     首先，按照https://blog.csdn.net/weixin_43945983/article/details/110882074，尝试关闭SSL VERIFY，但用处似乎不大。

尝试修改SSL的效果，在这里似乎并不好用。

     其次，尝试设置github代理服务器。按https://blog.csdn.net/u011476390/article/details/93411139，将端口号修改为目前使用的VPN的端口。随后重新推送以修复此问题。

     C. 在localhost:4000或网页检查页面时发现未生成内容。

空白页面。在localhost中空页面会显示CANNOT GET /，而github.io将会是一片空白。

     这可能是由于未能生成index.html文件导致的。
     使用命令
npm install hexo-generator-index
     安装插件以修复此问题。可参考https://www.jianshu.com/p/af83fc73e525

2.新建博文

     在blog目录下，使用
hexo new <自定义文件名>
     生成新的.md文件。这个文件会在下一次生成(hexo generate)-推送(hexo deploy)过程中更新到github仓库，从而在主页上可见。

     之后我们在这个.md文件中添加内容即可。如果添加内容中有语法问题（例如，标题中出现了冒号），该文件将不会被添加到网站中。

2.1 为博文增加图片

可能会用到的参考链接：
https://blog.csdn.net/weixin_34348805/article/details/91389277
https://blog.csdn.net/TimeJjc/article/details/86707165
https://blog.csdn.net/qq_41907806/article/details/109064385
但这些链接并没有解决我遇到的问题…

     添加图片的语法与markdown相同。这里特别注明，插入的图片名不能有空格。
     如果使用相对路径法
![<image name shown in browser>](<image path>)
     上述教程中会要求安装npm install hexo-asset-image，但在当前hexo版本下(hexo 5.4.0 + git 2.34.1.win.1)并不能在浏览器正常显示。实际上需要使用
npm install https://github.com/xcodebuild/hexo-asset-image
     以安装正确的依赖库。这个方法是参考了https://blog.csdn.net/qq_41862017/article/details/116501523总结的经验。

---

• ← Previous Post
• Next Post →

---

---