Hexo+githubPages创建个人网站(持续更新中。。。)
目录
本文主要内容:使用Hexo在本地生成静态博客,并部署到github上
安装Hexo前的准备
安装node.js
nodejs的官网下载安装,LTS版本是稳定版,这里我选择稳定版,注意:这是64位的
安装完成后,cmd
命令,进入dos窗口,输入node -v
显示版本号就说明安装成功,我安装之后,显示如下图
设置npm淘宝镜像站
- npm默认的源的下载速度可能很慢,这里将npm的源设置成淘宝镜像站。有点类似
阿里云镜像
npm config set registry "https://registry.npm.taobao.org"
[下面几步,不是小白的话可以跳过](# 配置SSH)
申请github账号
- 由于篇幅有限,请需要注册github的小伙伴移步我的另一篇文章github账号注册教程
创建博客仓库
- 这里有个注意点,仓库名应该为:用户名.github.io。例:chudonghai.github.io。
- 详细教程,请参见创建博客仓库教程
安装git
- git官网下载地址,支持多平台,我这里选择windows版
- 下载完成后,直接双击默认安装即可,也可以自定义安装,这里不再赘述。
配置SSH
- 安装完git后,打开git bush终端
- 设置user.name和user.email
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"
- 生成ssh密匙(命令中的“C”是大写的哦)
ssh-keygen -t rsa -C "你的GitHub注册邮箱"
- 然后连续回车3次,默认空密码创建Key
- 生成的ssh key文件在/users/用户名/.ssh文件夹下id_rsa.pub中,将内容添加到github中新创建的SSH key中保存即可
安装Hexo
- 执行以下命令,安装Hexo和相应的插件
# 安装hexo
npm install hexo-cli g
# 如果这个安装失败,就试试这个,如果成功就跳过这步
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install hexo-cli -g
# 初始化博客文件夹
hexo init blog
# 切换到该路径
cd blog
# 安装hexo的扩展插件
npm install
# 安装其它插件
npm install hexo-server --save
npm install hexo-admin --save
npm install hexo-generator-archive --save
npm install hexo-generator-feed --save
npm install hexo-generator-search --save
npm install hexo-generator-tag --save
npm install hexo-deployer-git --save
npm install hexo-generator-sitemap --save
# 这个是图片存放问题,后面会跟进更新
npm install https://github.com/CodeFalling/hexo-asset-image --save
初探Hexo
- 第一次使用hexo,在本地创建服务器使用。
# 生成静态页面
hexo generate
# 开启本地服务器
hexo s
- 打开浏览器,地址栏中输入:http://localhost:4000/,就可以看见刚刚创建的博客了。
问题:为什么访问http://localhost:4000/ 无反应?
- 解决方法:可能是由于端口问题引起的。使用Ctrl+C中断本地服务,使用命令
hexo s -p 5000
重新开启本地服务,访问http://localhost:5000/可以看到博客页面了。
将hexo博客部署到github上
- 修改配置文件blog/_config.yml,修改deploy项的内容,如下所示:
# Deployment 注释
## Docs: https://hexo.io/docs/deployment.html
deploy:
# 类型
type: git
# 仓库
repo: git@github.com:chudonghai/chudonghai.github.io.git
# 分支
branch: master
注意:
- type: git中的冒号后面由空格。
- 将git@github.com:chudonghai/chudonghai.github.io.git中的用户名换成自己的用户名git@github.com:github_username/github_username.github.io.git。
部署hexo
- 输入下面的命令将hexo博客部署到github中:
# 清空静态页面
hexo clean
# 生成静态页面
hexo generate
# 部署
hexo deploy
- 打开网页,输入http://github_username.github.io,打开github上托管的博客。如我的博客地址是:http://chudonghai.github.io。
- 如有改动,则需重新部署
域名绑定(以阿里云为例)
- 在source文件夹下新建文件CNAME,将域名
xxx.com
放到文件中,保存即可。
写作
- 创建新的博客
hexo new 文件名
即可创建对应的.md文件 - 写作完成后,记得重新部署
hexo命令缩写
- hexo支持命令缩写,如下所示。
hexo g
等价于hexo generate
hexo g:hexo generate
hexo c:hexo clean
hexo s:hexo server
hexo d:hexo deploy
hexo组合命令
# 清除、生成、启动
hexo clean && hexo g -s
# 清除、生成、部署
hexo clean && hexo g -d
如何换主题?
-
下面需要重新写,这里我采用的是直接去next官网下载压缩包,然后解压
-
将主题下载后,放到themes文件夹中改名为next。例如,下面命令安装next主题:
git clone https://github.com/iissnan/hexo-theme-next themes/next
。 -
然后设置站点配置文件_config.yml:
theme: next
hexo相关未解决问题
博客迁移
首先认识两个问题。
- 上面生成的文件,一部分留在本地电脑上,另一部分被部署到github远端了
- 一个项目默认只有一个分支,可以新建分支
部署到远端的部分:hexo生成的静态博客文件,默认放在master分支上
留在本地电脑上的部分:hexo的源文件、配置文件等,都留在本地
方法:
新建一个分支,save
更改我们的项目默认分支为save
clone你的项目到你的Hexo目录下。
git clone https://github.com/chudonghai/chudonghai.github.io.git
执行下面的命令将你的博客的原文配置等等保存到分支save上
git remote add origin https://github.com/JiaoMeichen/JiaoMeichen.github.io.git
git add .
git commit -m "your description"
git push origin save
确认你的_config.yml配置是提交到master分支
此时,hexo生成的静态博客文件默认放在master分支上。
hexo的源文件放在save分支上,换电脑时直接git clone save
博客图片问题
CodeFalling/hexo-asset-image插件的使用方法