Hexo+Github免费搭建个人博客详细教程
我的博客地址：https://jlexzhong.github.io/
我的github地址：/JlexZhong/JlexZhong.github.io.git：
文章目录
Hexo+Github免费搭建个人博客详细教程效果图安装安装Node.js配置npm安装hexo安装gitHexo搭建hexo常用命令推送网站发布博客：`_config.yml`文件的修改建议：向hexo博客中插入图片文章Front-matter选项详解最简示例最全示例主题美化主题更多个性化Github & Coding Pages 双部署参考总结效果图
安装
安装Node.js
安装Node.js，一直默认。输入：（查看是否安装正确）
node -v
添加环境变量：C:\Program Files\nodejs\
环境变量：C:\Users\26780\AppData\Roaming\npm
配置npm
查看npm是否安装成功：
npm -v
出现BUG：
npm install出现一直停留在“fetchMetadata: sill resolveWithNewModule find-cache-dir@“
解决：更换国内镜像源
更换成淘宝的源npm config set registry https://registry. – 配置后可通过下面方式来验证是否成功 npm config get registry – 或npm info express
安装hexo
npm config set registry https://registry. npm install -g hexo-cli
若出现warning，这是募捐提示，忽略即可
run `npm fund` for details
如果不想看到，输入命令：
npm install --no-fund
安装git
Github安装，教程网上很多请自行寻找，并配置好SSH-Key
Hexo搭建
建立空文件夹，我的是Blog，将来会在这个文件夹内存放与博客有关的内容
打开GIt Bash 或者命令行，输入：
hexo init
文件夹内会出现一些配置文件
node_modules:依赖包public：存放生成的页面scaffolds：生成文章的一些模板source：用来存放你的文章themes：主题_config.yml:博客的配置文件
执行：
hexo new hello Hexo //新建一篇名为"hello Hexo"的博客hexo g //生成静态文件hexo s //本地部署预览
会输出：
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
可能会出现加载不了的情况，因为4000端口太常用了，导致冲突。使用：
hexo server -p 5000 //更改端口
hexo常用命令
初始化npm install hexo -g //安装Hexonpm update hexo -g //升级 hexo init //初始化博客
命令简写
hexo n "我的博客" = hexo new "我的博客" //新建文章hexo g = hexo generate //生成hexo s = hexo server //启动服务预览hexo d = hexo deploy //部署
其他
hexo server //Hexo会监视文件变动并自动更新，无须重启服务器hexo server -s //静态模式hexo server -p 5000 //更改端口hexo server -i 192.168.1.1 //自定义 IPhexo clean //清除缓存，若是网页正常情况下可以忽略这条命令
推送网站
修改Blog文件夹下的**_config.yml**，在末尾修改成如下格式：# Deployment## Docs: https://hexo.io/docs/one-command-deploymentdeploy:type: gitrepo: /JlexZhong/JlexZhong.github.io.gitbranch: main
repo后的地址就是博客仓库的https地址
安装git部署插件：
npm install hexo-deployer-git --save
然后输入命令：
hexo clean //清理静态文件hexo g //生成静态文件hexo d //部署
出现bug：
解决：
如果不是代理问题，在_config.yml文件中把repo：后的地址改为git@:JlexZhong/JlexZhong.github.io.git
是代理问题，清除代理
remote: Permission to JlexZhong/JlexZhong.github.io.git denied to junz2001.fatal: unable to access '/JlexZhong/JlexZhong.github.io.git/': The requested URL returned error: 403[41mFATAL[49m {err: Error: Spawn failedat ChildProcess.<anonymous> (E:\Blog\node_modules\hexo-util\lib\spawn.js:51:21)at ChildProcess.emit (events.js:400:28)at ChildProcess.cp.emit (E:\Blog\node_modules\cross-spawn\lib\enoent.js:34:29)at Process.ChildProcess._handle.onexit (internal/child_process.js:277:12) {code: 128}} Something's wrong. Maybe you can find the solution here: %s [4mhttps://hexo.io/docs/troubleshooting.html[24m
此时博客已经上线啦！可以通过网络访问了。浏览器输入博客网站地址xxxx.github.io
修改域名：
现在你的个人网站的地址是yourname.github.io，如果觉得这个网址逼格不太够，这就需要你设置个人域名了。但是需要花钱。
我没有选择购买域名，等后期再来更新吧
发布博客：
先hexo new post "article title"新建一篇文章，在博客文件夹，Blog/source/_posts目录下回多出一个Markdown文件，编写完markdown文件后，保存根目录下输入hexo g生成静态网页然后输入hexo s可以本地预览效果最后输入hexo d上传到github上_config.yml文件的修改建议：
请修改_config.yml的url的值为你的网站主URL（如：http://xxx.github.io）。建议修改两个per_page的分页条数值为6的倍数，如：12、18等，这样文章列表在各个屏幕下都能较好的显示。如果你是中文用户，则建议修改language的值为zh-CN。subtitle选项：在我使用的主题当中即为网页首页中间的字体块，若为空将显示为subtitlepost_asset_folder选项设置为：true。当该配置被应用后，使用hexo new命令创建新文章时，会生成相同名字的文件夹，也就是文章资源文件夹。向hexo博客中插入图片
进入博客根目录配置_config.yml:将post_asset_folder: false·改为post_asset_folder: true
安装插件:
npm install /CodeFalling/hexo-asset-image -- save
此时再执行命令 :
hexo n article_name
创建新的文章，在 source/_posts 中会生成文章 post_name.md 和同名文件夹 post_name,我们将文章中所使用到的将图片资源均放在 post_name 中，这时就可以在文章中使用相对路径引用图片资源了
添加图片:在想添加的位置写入,例如
文章Front-matter
Front-matter是md文件最上方以---分隔的区域，用于指定个别文件的变量.Front-matter选项中的所有内容均为非必填的。但我仍然建议至少填写title和date的值。
选项详解
注意:
如果
img属性不填写的话，文章特色图会根据文章标题的hashcode的值取余，然后选取主题中对应的特色图片，从而达到让所有文章的特色图各有特色。date的值尽量保证每篇文章是唯一的，因为本主题中Gitalk和Gitment识别id是通过date的值来作为唯一标识的。如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的_config.yml中激活了配置。有些在线的 SHA256 加密的地址，可供你使用：开源中国在线工具、chahuo、站长工具。您可以在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则
以下为文章的Front-matter示例。
最简示例
---title: typora-vue-theme主题介绍date: -09-07 09:25:00---
最全示例
---title: typora-vue-theme主题介绍date: -09-07 09:25:00author: 赵奇img: /source/images/xxx.jpgtop: truehide: falsecover: truecoverImg: /images/1.jpgpassword: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca1c923adc6c92toc: falsemathjax: falsesummary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要categories: Markdowntags:- Typora- Markdown---
主题美化
在哪找？
https://hexo.io/themes/
cd 进blog文件夹根目录，输入：
git clone 主题http链接 themes/主题名称
主题会下载到themes文件夹下。
我用的是/blinkfox/hexo-theme-matery，主题名称是blinkfox，所以输入：
git clone /blinkfox/hexo-theme-matery themes/blinkfox
在下载的主题文件夹内有使用文档，中英文版本十分友好。
切换主题，找到根目录的_config.yml，将landscape改为blinkfox，也就是改为我们下载的主题名字：
# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: landscape
然后再次部署网站，hexo g，hexo d
主题更多个性化
我们可以通过修改根目录或者主题目录下的_config.yml，实现更多的个性化。当然，不同的主题的语法还有不同，修改方法请参考各主题的使用文档。例如：
代码高亮
从 Hexo5.0 版本开始自带了prismjs代码语法高亮的支持，本主题对此进行了改造支持。
如果你的博客中曾经安装过hexo-prism-plugin的插件，那么你须要执行npm uninstall hexo-prism-plugin来卸载掉它，否则生成的代码中会有{和}的转义字符。
然后，修改 Hexo 根目录下_config.yml文件中highlight.enable的值为false，并将prismjs.enable的值设置为true，主要配置如下：
highlight:enable: falseline_number: trueauto_detect: falsetab_replace: ''wrap: truehljs: falseprismjs:enable: truepreprocess: trueline_number: truetab_replace: ''
文章字数统计插件（建议安装）
如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount插件。
安装命令如下：
npm i --save hexo-wordcount
然后只需在本主题下的_config.yml文件中，将各个文章字数相关的配置激活即可：
postInfo:date: trueupdate: falsewordCount: false # 设置文章字数统计为 true.totalCount: false # 设置站点文章总字数统计为 true.min2read: false # 阅读时长.readCount: false # 阅读次数.
更多请查看主题使用文档
Github & Coding Pages 双部署
后续更新
参考
https://reclusew.github.io//08/12/blog-setup/
/posts/6e8839eb.html#toc-heading-65
/weixin_42334475/article/details/101055364?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-5.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-5.control
/Fitz1318/article/details/86548129?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162977080816780269848140%2522%252C%2522scm%2522%253A%25220713.130102334…%2522%257D&request_id=162977080816780269848140&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduend~default-2-86548129.pc_search_result_control_group&utm_term=hexo+%E6%8F%92%E5%85%A5%E5%9B%BE%E7%89%87&spm=1018.2226.3001.4187
总结
看到这里，相信您已经搭建出自己的个人博客网站了！
![[转载] 使用hexo+github搭建个人博客详细教程](https://100zi.50zi.cn/uploadfile/img/16/19/811f8f3cbc0d0cc3118e3755c1f82f6b.jpg)
