0


GitHub+Hexo搭建个人博客 - 详细教程

所需环境条件:

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了。

标签: github

本文转载自: https://blog.csdn.net/lang_xw/article/details/143050877
版权归原作者 lang_xw 所有, 如有侵权,请联系我们删除。

“GitHub+Hexo搭建个人博客 - 详细教程”的评论:

还没有评论