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 中,这时就可以在文章中使用相对路径引用图片资源了
添加图片:在想添加的位置写入![](图片名字.图片格式)
,例如![](1.png)
文章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
总结
看到这里,相信您已经搭建出自己的个人博客网站了!