最新Hexo框架在GitHub上搭建个人博客
一、前言
1.本教程主要讲述个人博客的搭建,不涉及网页界面的个性化配置修改。
2.根据GitHub网站的最新调整[2021.9]做出搭建方法的改进。
3.欢迎访问我的最新版博客:www.Hopedreaming.github.io
4.使用github pages服务搭建博客的好处有:
*全是静态文件,访问速度快; *免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台; *可以随意绑定自己的域名,不仔细看的话根本看不出来你的网站是基于github的; *数据绝对安全,基于Github的版本管理,想恢复到哪个历史版本都行; *博客内容可以轻松打包、转移、发布到其它平台;
二、准备工作
1.GitHub账号
2.软件Node.ji、npm及其相关基础知识
3.软件Gitfor windows(或者其它git客户端)
本教程使用环境:
*window 10
*Node.js --version v12.16.2
*Git version 2.33.0.windows.2
*Hexo --version 4.3.0
三、注册GitHub账号、创建仓库
1.去GitHub官网注册账号,务必绑定邮箱并且通过邮箱验证
2.创建一个命名为:用户名.github.io 的仓库,必须是用户名.github.io,这样以后博客的访问地址就是用户名.github.io。
四、安装软件
1.安装Node.js
*Node.js 为大多数平台提供了官方的 安装程序。对于中国大陆地区用户,可以前往 淘宝 Node.js 镜像 下载。
*Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本
2.安装Git for window 客户端
*去官网下载并安装 git.
3.所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo
五、安装Hexo框架、初始化
所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo,具体如下:
*在自己的电脑中选一个盘,在盘根目录下创建一个BLOG文件夹,进入该文件夹,单机鼠标右键,选择:Git Base Here
*然后就进入了Git软件操作界面,输入以下指令执行Hexo框架的安装:
$ npm install -g hexo-cli
*git软件窗口界面保留不要关闭,后面的操作全在这儿!!!
初始化Hexo框架:
*在刚才的BLOG目录下新建一个HEXO文件夹(后续的博客代码文件全在这里)
在Git操作界面 分别执行以下操作做:
$ cd /f/BLOG/hexo/ $ hexo init
*Hexo框架会自动下载一些文件到这个目录,包括node_modules,目录结构如下图:
*然后分别执行以下指令:
$ hexo g # 生成 $ hexo s # 启动服务
*执行以上命令之后,hexo就会在public文件夹生成相关html文件,这些文件将来都是要提交到github去的,如下图:
六、配置SSH key
配置SSH key 的目的是为了获取你的GitHub权限,因为直接使用用户名和密码太不安全了,所以我们使用ssh key来解决本地和服务器的连接问题。
$ cd ~/. ssh #检查本机已存在的ssh密钥
**如果提示:No such file or directory 说明你是第一次使用git。
$ ssh-keygen -t rsa -C "邮件地址" #GitHub注册邮箱
*然后连续3次回车,最终会生成一个文件在用户目录下,打开用户目录,找到
.ssh\id_rsa.pub
文件,记事本打开并复制里面的内容,打开你的Github主页,点击你的头像->进入Settings -> SSH and GPG keys -> New SSH key:[title随便填,SSH key 认真粘贴复制,填好后保存!]
测试是否配置成功:
$ ssh -T git@github.com # 注意邮箱地址不用改
如果提示Are you sure you want to continue connecting (yes/no)?
,输入yes,然后会看到:
Hi 你的用户名! You’ve successfully authenticated, but GitHub does not provide shell access.
看到这个,代表配置成功!!!
此时你还需要配置:邮箱和用户名:
$ git config --global user.name "liuxianan"// 你的github用户名,非昵称
$ git config --global user.email "xxx@qq.com"// 填写你的github注册邮箱
*期间会弹出一个GitHub窗口让你输入用户名和密码[可能是SSH key],按照要求输入,千万不能填错!!!!!
七、修改主题
下载主题,博主用的是Fluid主题,推荐使用
首先下载这个主题:
$ cd /f/BLOG/HEXO
$ npm install --save hexo-theme-fluid
修改HEXO目录下_config.yml
文件中的theme: landscape
改为theme: fluid,然后重新执行
hexo g`来重新生成。
如果出现一些莫名其妙的问题,可以先执行hexo clean
来清理一下public的内容,然后再来重新生成和发布。
八、上传博客文件到Github
如果一切都配置好了,hexo d
一键就搞定。
首先,ssh key
肯定要配置好。
其次,配置_config.yml
中有关deploy的部分
推荐使用Notpad++ 打开修改 .yml文件
配置前先安装一个插件以防万一:
npm install hexo-deployer-git --save
接下来,配置 heox目录下的_config.yml
中有关deploy的部分:
GitHub更新前的写法:
deploy:
type: git
repository: git@github.com:用户名/用户名.github.io.git
branch: master
GitHub更新后的写法,特别关键!!!
deploy:
type: git
repository: git@github.com:用户名/用户名.github.io.git
branch: main
接下来分别执行以下指令,就能把博客部署到GitHub上了:
hexo c #来清理一下public的内容,然后再来重新生成和发布
hexo g #生成静态页面至public目录
hexo d #部署到GitHub
附录
hexo常用指令:
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本
缩写:
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
组合命令:
exo s -g #生成并本地预览
hexo d -g #生成并上传
l + c’关闭server)
hexo deploy #部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本
缩写:
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
组合命令:
hexo s -g #生成并本地预览
hexo d -g #生成并上传
> 参考于:[canghe.top/2019/07/10/hexo在GitHub上搭建个人博客/](http://canghe.top/2019/07/10/hexo在GitHub上搭建个人博客/)
> 欢迎大家访问我的博客:www.hufe.top