所需环境条件:
1、git已安装
2、node已安装
1、在GitHub创建个人仓库
点击图中https://xxx.github.io/即可浏览到页面。
2、安装Hexo
在电脑中选一个合适的位置创建一个文件夹,命名为
Blog
,Hexo框架和以后自己发布的网页都在这个文件夹中。创建好后,进入文件夹中,按住shift键,右击鼠标点击命令行。
输入命令安装Hexo:
npm install -g hexo-cli
安装完成后,初始化并检测网站雏形:
hexo init // 初始化
hexo g // 生成静态文件
hexo s // 启动服务预览
在浏览器中输入http://localhost:4000/即可看到
3、变更主题
可以在 https://hexo.io/themes/index.html 进行主题的挑选更换。
这次我选了比较喜欢的极简风格的主题:oranges
在Blog themes文件中打开命令行,输入以下命令下载主题:
git clone https://github.com/zchengsite/hexo-theme-oranges.git
然后使用记事本打开
Blog
文件中的
_config.yml
文件,更换主题名称:
在
Blog
中运行以下命令:
hexo clean
hexo g
hexo s
再刷新
http://localhost:4000/
网址,即可看到新的主题页面。
4、更换主题配置
更换语言:通过修改**
Blog
中的配置文件
_config.yml
中的
language
**,中文zh-CN,英文en。
其他配置更改步骤在主题网址中有具体描述,根据自身需求更改即可。
5、配置SSH Key
鼠标右击打开
Git Bash
若还没有user.name 和user.email,先配置
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"
生成ssh密钥文件
ssh-keygen -t rsa -C "你的GitHub注册邮箱"
然后连续三个回车,默认不需要设置密码,然后找到生成的
.ssh
文件夹中的
id_rsa.pub
密钥,将内容全部复制
找到Github Setting keys页面,新建new SSH Key
标题随意填,将刚复制的id_rsa.pub密钥粘贴到Key中,最后Add SSH key。
在Git Bash中检测GitHub公钥设置是否成功,输入 ssh git@github.com
如上即说明成功了!
6、连接Hexo与GitHub
获取ssh地址:
打开Blog文件中的_config.yml(即站点配置文件),翻到最后修改为:
deploy:
type: git
repo: 刚获取的ssh地址
branch: main
然后保存。
最后安装Git部署插件:(在根目录下执行,而不是在git bash里)
npm install hexo-deployer-git --save
安装时遇到了这个错误
换成以下命令就成功了
pnpm install hexo-deployer-git --save
这时再输入以下命令:
hexo clean
hexo g
hexo d // 部署到服务上
将代码推送到git上,再然后访问
https://github.com/xxx/xxx.github.io
,就能看到部署好的主题页面了,大功告成!
7、解决图片上传问题
在本地typora写好一篇笔记后,上传到博客上,会发现图片显示不出来,因为笔记中的图片地址指向本机电脑,上传到博客之后,自然就无法显示了。
这里我是在GitHub新建了一个专门用来存放图片的仓库。
选择文件上传后点击**
Commit changes
**就ok了。
上传好图片后,接下来就是使用图片了。
获取图片外链
在上传好的图片上单机右键,选择复制链接地址,然后将其使用在markdown图片外链地址上,这时图片并没有正常显示,只需要修改成以下格式:
https://github.com/用户名/repository仓库名/raw/分支名main/图片文件夹名称/.png or.jpg
(我这里只将复制地址中的blog改成了raw就成功啦)
8、发布文章
在Blog中打开终端命令行输入:
hexo n "你的文章标题名"
接着在\Blog\source_posts文件夹中就能看到新建的markdown文件,编辑好后重新执行hexo clean、hexo g、hexo d命令就ok了。
版权归原作者 lang_xw 所有, 如有侵权,请联系我们删除。