从零开始构建Hexo博客

最新推荐文章于 2023-12-08 23:56:53 发布

AB小站

最新推荐文章于 2023-12-08 23:56:53 发布

阅读量345

点赞数

分类专栏：前端文章标签： hexo node.js html5

本文链接：https://blog.csdn.net/Allan_Bst/article/details/114003028

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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 同上
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小站 下期更新后续文章

AB小站

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
从零开始构建Hexo博客

Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Heroku上，是搭建博客的首选框架。下面正式从零开始搭建年轻人的第一个网站。配置Hexo环境安装Node.jsHexo基于Node.js，首先需要下载Node.js。下载地址：Download | Node.js 下载安装包，注意安装Node.js会包含环境变量及npm的安装，安装后，检测Node.js是否安装成功，#在命令行中输入node -vnode -vv12.14.1#
复制链接

扫一扫