Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Heroku上,是搭建博客的首选框架。下面正式从零开始搭建年轻人的第一个网站。
配置Hexo环境
安装Node.js
Hexo基于Node.js,首先需要下载Node.js。
下载地址:Download | Node.js 下载安装包,注意安装Node.js会包含环境变量及npm的安装,安装后,检测Node.js是否安装成功,
#在命令行中输入node -v
node -v
v12.14.1
#检测npm是否安装成功,在命令行中输入 npm -v
npm -v
6.13.4
如果上述两个命令都没问题,那么到这了,Node.js环境已经全部搭建完成,接下来我们开始安装Hexo。
安装Hexo
Hexo就是我们的个人博客网站的框架, 这里需要自己在电脑常里创建一个文件夹,可以命名为Blog,Hexo框架与以后你自己发布的网页都在这个文件夹中。
打开 cmd,依据以下命令开始安装hexo
# 在E盘下创建Blog文件夹(盘符和文件夹名任意,此处为示例)
E:
mkdir Blog
cd Blog
# 使用npm命令安装Hexo
npm install -g hexo-cli
# 初始化我们的博客,博客名字为'myblog'
hexo init myblog
为了能展示我们网站的界面,接下来我们通过几条简单的命令来在网站中发表一篇文章
# 进入网站的主目录
cd myblog
# 创建一篇名为'my_first_article'的文章
hexo new post my_first_article
# 生成静态网站
hexo g
# 在本地电脑预览网站
hexo s
上面命令执行后会显示下图所示,可以看到命令 hexo s 执行后,显示网站正在 http://localhost:4000 运行,进入此页面即可看到自己刚刚创建的网站
还记得吧,网页中第一篇文章就是我们刚刚创建的文章,现在看来,我们的网站还是比较丑的,因为使用的是Hexo默认的主题,关于主题的切换,我们下文都会讲解。
Hexo目录解析
上面生成的博客,可以在资源管理器中打开,就可以看到通过上面命令所生成的基本网站框架了,具体目录作用如下
- node_modules Hexo所依赖依包/工具,新版本Hexo,可以将主题存储在此目录
- hexo-theme-landscape Hexo的默认主题 landscape
- scaffolds 模板文件夹
- post.md
hexo new post <title>
的时候,Hexo 会根据post.md进行初始化构建。 - page.md 同上
- draft.md 同上
- post.md
- source
- __posts 博客的文章就是保存在这个文件夹下, _posts 目录下的md文件,会被编译成 html 文件,放到 public 文件夹下。
- themes 主题文件夹,存储主题
- .gitignore 声明不被 git 记录的文件
- _config.landscape.yml 网站默认主题为 landscape,此文件为默认主题的配置文件
- _config.yml 网站的全局配置文件,设置包括网站标题、关键字和描述信息等。
- package.json 框架的基本参数信息和它所依赖的插件
Hexo配置文件
Hexo 的配置文件在 Hexo官网|Configuration 中有详细记载,可以进入官网参考配置
云端部署Hexo网站
现在我们在本地已经成功部署了Hexo博客了,但是其他人并不能看到我们的博客,这就需要将Hexo博客部署到云端了,常用的有以下三种方式部署。
因为hexo采用git方式部署网站,我们需要先安装git客户端。
安装配置Git
什么是Git ? 简单来说Git是开源的分布式版本控制系统,用于敏捷高效地处理项目。我们网站在本地搭建好了,需要使用Git同步到GitHub上。如果想要了解Git的细节,参看廖雪峰老师的Git教程:Git教程
从Git官网下载:Git - Downloading Package 现在的机子基本都是64位的,选择64位的安装包,下载后安装,在命令行里输入git测试是否安装成功,若安装失败,参看其他详细的Git安装教程。安装成功后,将你的Git与GitHub帐号绑定,鼠标右击打开Git Bash
或者在菜单里搜索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_Settings_keys 页面,新建new SSH Key
Title为标题,任意填即可,将刚刚复制的id_rsa.pub内容粘贴进去,最后点击Add SSH key。
在Git Bash中检测GitHub公钥设置是否成功,输入 ssh git@github.com :
如上则说明成功。这里之所以设置GitHub密钥原因是,通过非对称加密的公钥与私钥来完成加密,公钥放置在GitHub上,私钥放置在自己的电脑里。GitHub要求每次推送代码都是合法用户,所以每次推送都需要输入账号密码验证推送用户是否是合法用户,为了省去每次输入密码的步骤,采用了ssh,当你推送的时候,git就会匹配你的私钥跟GitHub上面的公钥是否是配对的,若是匹配就认为你是合法用户,则允许推送。这样可以保证每次的推送都是正确合法的。
Github 仓库部署
注册Github账户
首先如果你还没有 Github 账号的先注册一个,具体过程如下
创建Github仓库
点击 Start project 或者下面的 new repository 创建一个新的仓库
注意点来了,Github 仅能使用一个同名仓库的代码托管一个静态站点,这个网上很多教程没说到的。
测试站点仓库
然后打开仓库创建一个 index.html 文件,并随意先写点内容,比如 Hello World.
输入文件名为 index.html
这个时候打开 http://你的用户名.github.io 就可以看到你的站点啦,是不是很简单!index.html 内容只是暂时的预览效果,后面把 Hexo 的文件部署上去就可以在 http://你的用户名.github.io 看到你自己的博客啦!
Hexo部署到Github
此时,本地和Github的工作做得差不了,是时候把它们两个连接起来了。你也可以查看官网的部署教程。
先不着急,部署之前还需要修改配置和安装部署插件。
- 打开项目根目录下的 _config.yml 配置文件配置参数。找到deploy字段,进行如下修改
deploy:
- type: git
message: update
# 改为你新建的仓库地址
repo: https://gtihub.com/webw3c/webw3c.github.io.git
branch: master
- 要安装一个部署插件 hexo-deployer-git。
npm install hexo-deployer-git --save
- 开始博客部署
# 执行以下命令就可以部署上传啦,以下 g 是 generate 缩写,d 是 deploy 缩写
hexo g -d
稍等一会,在浏览器访问网址: https://你的用户名.github.io 就会看到你的博客啦!
码云GiteePage部署
同Github,首先去http://gitee.com/ 注册个人账户,然后新建个人仓库,步骤同Github。
个人服务器部署
下面讲解如何将Hexo博客部署到非github pages
的第三方云服务器上,并实现一键部署。
准备工作
- 一台云服务器(阿里云、腾讯云等)
- 已有hexo博客框架搭建的博客(仓库第一部分)
nginx配置
nginx安装教程参考我的往期文章
这里约定个人博客目录如下
# 个人博客存放目录
/var/www/ablog/
# Git网站仓库目录
/root/blog.git/
# 临时目录空间
/var/www/tmp/ablog/
首先创建个人博客存放目录
mkdir /var/www/ablog
编辑nginx配置文件
# 修改nginx的默认配置文件
vim /usr/local/nginx/conf/nginx.conf
# 找到server下的location节点,修改如下
location / {
root /var/www/ablog;
index index.html index.htm;
}
# 重新加载nginx配置文件
cd /usr/local/nginx/sbin
nginx -s reload
创建服务的Git仓库
ablog.git作为远程 Git 仓库,Hexo 在本地生成的博客静态文件可以通过 push 与其同步。
mkdir ~/blog.git && cd ~/blog.git
git init --bare
设置Git的Hook脚本,post-receive 脚本将在 blog.git 仓库接收到 push 时执行。
# 在服务端创建 post-receive 脚本
vi ~/blog.git/hooks/post-receive
# 输入以下内容,并保存退出,这里目录约定如下,可根据自己情况设置
# /var/www/ablog : 个人博客存放目录
# /root/blog.git : Git网站仓库目录
# /var/www/tmp/ablog : 临时目录,git会将提交的文件先存到临时目录
GIT_REPO=/root/blog.git
TMP_GIT_CLONE=/var/www/tmp/ablog
PUBLIC_WWW= /var/www/ablog
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${PUBLIC_WWW}
cp -rf ${TMP_GIT_CLONE}/ ${PUBLIC_WWW}
上面的配置脚本解释:
GIT_REPO
: 服务器git仓库所在目录,此目录并不放博客项目。TMP_GIT_CLONE
: 临时目录,git会将提交的文件先存到临时目录。PUBLIC_WWW
: 服务器上放博客项目的目录,你想将博客放在哪,修改此项即可。 注意此目录应对于nginx root
设置的目录。- 下面四行为bash命令,设置好会按顺序自动执行。
rm -rf ${TMP_GIT_CLONE}
意思为移除第二行定义的临时目录TMP_GIT_CLONE
。git clone $GIT_REPO $TMP_GIT_CLONE
意思为重新克隆最新的项目到临时目录TMP_GIT_CLONE
中。rm -rf ${PUBLIC_WWW}
意思为移除当前正在线上运行的项目。cp -rf ${TMP_GIT_CLONE}/ ${PUBLIC_WWW}
意思为重新从临时目录中拷贝新的项目到PUBLIC_WWW
中。
添加文件执行权限
# 这个 post-receive 就是上一步创建的脚本,为其添加执行权限
chmod +x post-receive
修改本地博客配置
打开项目文件,找到_config.yml
打开,找到deploy
配置进行修改。
deploy:
type: git
message: update
# 改为自己的服务器IP和仓库
repo: root@24.122.117.20:/root/blog.git
branch: master
这里的repo
配置是服务器地址配置。冒号后面对应的是上一步设置的仓库目录地址。branch
是git分支。
修改好后执行hexo g
进行编译,再执行hexo d
进行部署。
提示输入密码,这里输入服务器登录密码即可。出现以下信息部署完成:
Branch 'master' set up to track remote branch 'master' from 'root@24.122.117.20:/root/blog.git'.
INFO Deploy done: git
Hexo配置域名
首先需要购买一个域名,请关注公众号 AB小站
下期更新后续文章