快速搭建一个自己的博客

准备

本地系统环境:Ubuntu 20.04.5 LTS

Node版本:18.15

Git版本:2.25.1

一个github账号

一台云服务器

一个备案好的域名

系统环境不同,根据自己的系统来操作就行,步骤差不多。

Node、Git的版本选择长期稳定支持的新版本就行。

云服务器和域名不是必须的,只是为了私有化更强。

相信看到这篇文章的大部分应该对这些东西都有基本的了解,准备性的东西就不罗嗦了。

安装Hexo:

全局安装Hexo,终端输入命令:sudo npm install hexo-cli -g

安装成功后终端输入hexo -v,看到版本号表示成功,本次版本hexo-cli: 4.3.0

配置仓库

在github中新建一个仓库,名称必须是用户名.github.io,这是用于托管博客,方便其他人访问博客。

为了以后的文件托管方便,可以通过ssh的方式连接,不需要每次手动输入密码,不会的自行解决。

初始化本地博客

在电脑中新建一个文件夹,名字随意(为了不出现莫名错误,不要有特殊符号或中文),这里取名为Blog。

在Blog目录下打开终端,输入hexo init初始化博客项目,没有异常将会生成如下重要文件夹或文件:

.
├── _config.yml // 博客配置文件
├── node_modules // 项目依赖包
├── scaffolds // 文章生成模板
├── source // 文章
├── themes // 主题

终端输入hexo g进行静态部署,终端输入hexo s启动服务器,在浏览器中输入localhost:4000访问,出现hexo的默认页面表示博客搭建成功。

到此,博客搭建成功,但还不能访问,需要部署到GitHub或自己的服务器上才能实现让他人访问。

将Hexo部署到GitHub

用编辑器打开Blog目录找到_config.yml 文件,找到deploy配置项,修改为如下内容:英文冒号,冒号后要加一个空格

deploy:
  type: 'git'
  repository: 'github仓库名'
  branch: main # 绑定的分支

光改配置还不够,需要安装git插件deploy-git,才能部署到github。

终端输入npm install hexo-deployer-git --save进行安装。

安装完成后,终端输入如下三条命令:

hexo clean #清除缓存文件和已经生成的静态文件
hexo g #生成网站静态文将到默认设置的public文件夹
hexo d #自动生成网站静态文件,并部署到指定仓库

hexo s # 本地部署

以上四个命令是经常用到的

至此,在浏览器中访问:https://xxxxx.gibhub.io就能访问博客了。

解析自定义域名

以腾讯云为例,进入域名控制台,进入域名解析页面,添加一条解析记录:

打开Blog/source目录,添加CNAME文件,在里面填上自己的域名,不需要带www。

在Blog目录中打开终端,hexo clean hexo g hexo d三条命令执行一遍,打开GitHub如果CNAME文件出现在项目中,点击Settings——> pages——>Custom Domain 输入解析的域名,不要带www,然后浏览器输入绑定的域名,能打开博客说明成功。

注意是在用户名.github.io的仓库中设置,不是主页设置

到此,自定义域名完成,可以通过自定义域名访问博客。

发布文章

发布文章可以使用两个命令新建.md的文件,命令可以二选一,但不支持手动新建:

hexo n "文章名"   # hexo new "文章名"

新建的文件默认在博客根目录的source/_posts中,默认会写入一些模板内容,修改模板在目录scaffolds/post中进行。

具体的设置看文档说明。

安装主题美化博客

Hexo主题很多,但使用方式都基本差不多,都是下载,然后应用。主题的配置涉及很多方面,具体的内容要翻主题文档。

这里以Butterfly为例:https://butterfly.js.org/posts/21cfbf15/#安裝

在博客根目录打开终端,输入git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly安装主题

也可以通过npm安装:npm install hexo-theme-butterfly

个人喜欢通过npm的方式安装

npm安装需要hexo5.0以上版本才支持,这种方式安装的主题在node_modules中,不在themes中。

升级方法:在主题目录下,运行 git pull

升级方法:在 根目录下,运行 npm update hexo-theme-butterfly

应用主题:修改根目录下的 _config.yml,把主题改为 butterfly

注意:该主题需要安装pug和stylus渲染器,安装命令:npm install hexo-renderer-pug hexo-renderer-stylus --save

为了方便升级,可以在根目录中创建文件_config.butterfly.yml,把主题目录中的_config.yml内容复制过去。

注意:是主题的yml不是根目录hexo的yml,仔细区分

所有有关butterfly的配置在新的_config.butterfly.yml中,它的优先级高于主题的优先级,并且会自动合并主题的不同配置。

改完后依次执行三件套部署本地,看是否配置成功,最终改好后再部署到服务器。

更具体的内容参考主题说明。

自动部署到云服务器

我用的轻量云服务器,操作系统是Ubuntu,其他服务器或者操作系统都类似。

前面在本地已经配置了将博客自动部署到github上,这里只需要在服务器上创建一个Git钩子,然后修改一下deploy配置即可。

服务器上创建Git钩子:

(1)登录服务器,创建一个git用户。(默认已经安装了Git)

# 创建一个名叫git的用户(名字自定义即可)
adduser git

(2)给 git 用户添加权限

#在根目录下的 home 文件夹下创建一个git文件夹
mkdir /home/git
#切换到创建好的git文件夹
cd /home/git
#创建 .ssh文件夹,里面主要用来放公钥
mkdir .ssh
#切换到.ssh文件夹并创建authorized_keys文件
cd .ssh
touch authorized_keys

ssh的配置能看到这里的基本都懂,这里就不多啰嗦

(3)初始化仓库

创建一个存放 git 仓库的文件夹:

mkdir /home/git/repos
cd /home/git/repos

#初始化一个裸仓库
git init --bare hexoBlog.git
#配置仓库的权限,让之前创建好的git用户能读写
chown -R git:git hexoBlog.git

这里必须注意,如果不给权限,后面的 git pull 将会报错,原因是没有权限写入。关于裸仓库和普通仓库的区别简单来说就是裸仓库看不到项目文件,普通仓库和你的项目目录一样,只是多了一个.git 文件夹。

(4)生成项目仓库

#创建我服务器上的项目目录hexoBlog
mkdir /home/git/repos/hexoBlog
#克隆仓库
git clone/home/git/repos/hexoBlog.git
#设置权限
chown -R git hexoBlog

注意:一定要路径,git 仓库是/home/git/repost, 项目仓库是 /home/git/repos/hexoBlog。

要是对路径不熟悉,可以直接在用户根目录中操作,不要嵌入太多层目录

(5)克隆仓库到本地

# 通过ip地址从配置好的线上仓库拉取下来
git clone git@IP.XXX:/home/git/repos/hexoBlog.git
# 如果有配置域名的话也可以通过域名拉取
git clone git@www.XXX.XXX:/home/git/repos/hexoBlog.git

因为公钥的原因,这里是不需要密码的,如果成功,电脑上会出现一个 hexoBlog 的文件夹,如果报错请检查后再进行下面的操作。

(6)上传代码(git push)

# 打开刚才克隆下来的本地仓库
cd hexoBlog 
# 创建README.md文件
touch README.md
git add .
git commit -m"创建README.md文件"
git push

不出意外已经正常上传了,如果报错请检查权限。

(7)添加git钩子

注意这是在云服务器中操作

#切换到这个目录
cd /home/git/repos/hexoBlog.git/hooks
# 生成post-receive文件
touch post-receive
# 使用vim编辑
vim post-receive

在 post-receive 文件里面粘贴:

#!/bin/sh
# 打印输出
echo '======上传代码到服务器======'
# 打开线上项目文件夹
cd /home/git/repos/hexoBlog
# 这个很重要,如果不取消的话将不能在cd的路径上进行git操作
unset GIT_DIR
git pull origin main
echo $(date) >> hook.log
echo '======代码更新完成======'

保存后给 post-receive 文件加上运行权限

chmod +x post-receive

(8)自动部署
在hexo博客根目录中修改_config.yml文件中的deploy选项如下:

deploy:
  type: git
  repo: git@IP地址:/home/git/repos/hexoBlog.git
  branch: main

到此,只需要在终端输入hexo d就可以将本地博客推送到服务器中实现自动部署

posted @ 2023-06-15 23:29  渔-火  阅读(74)  评论(0编辑  收藏  举报