18.06.20,自己的Hexo博客总算Run起来了。不算整主题,来来回回也折腾了我两天才弄好,私以为网上的教程有点毒,要不就是笔记式的,要不就是Github Pages。
不过既然我总算捣鼓好了,就来做个教程吧,从零开始搭建Hexo博客。
前言 & 避雷
本文主要介绍:如何不通过Github Page搭建自己的Hexo博客,以及包括Hexo主题,git钩子,批处理的优化内容
本文适合对象:准备自己折腾在服务器用Hexo搭博客的小伙伴
本文环境为本地Windows10,服务器Ubuntu16.04。
本文不使用Github Page,仅操作本地和服务器。
已经搭好的本人博客,可作为参考
思路
我发现大多数教程都没有关于思路的讲解,这样看起来会觉得很混乱,分不清每一步自己在干什么。
对于我这种喜欢多个博客对比参考的,很容易就云里雾里了,所以这里先给大家理一下思路。
本节只讲思路,实现细节从下一节 “动手操作” 开始。
说好了从零开始嘛,觉得基础的部分跳过去也OK的。
准备工作
本文并不包括准备工作环节的实际操作教学,请准备完成后再阅读第二节 “动手操作” 内容。
ps. 本环节有问题可以咨询本文作者
- 域名,服务器
任何网站都需要一个域名和服务器,就像门牌号和房子一样。而获取的方法也是很直接,花钱买。国内购买比较推荐阿里云和腾讯云,有学生优惠的话几乎花不了什么钱。不过中华家这方面有个小特色,购买域名、服务器搭建网站都需要进行备案,所以我个人比较推荐阿里云,全程手机点点,拍几张照片就完事了。
对了,服务器主机选Ubuntu16.04吧,别太排斥命令行。
- 本地 Windows PC
倒不是说别的系统不行(Mac的怒火),只是因为本文基于此配置。
本地配置
这个环节结束后,你将可以在自己这台电脑上访问你的博客
装好需要的软件,如git,Node.js,Hexo
初始化Hexo博客
更换主题【可选】
服务器配置
这个环节结束后,你的博客将正式向整个互联网开放!
安装需要的软件,如git,nginx
设置网站访问目录
上传本地博客到服务器上
优化处理
前两个环境结束后,你会发现有些地方的步骤太过繁杂,这个环节结束后,所有的操作将被你处理成傻瓜式。
使用批处理将
输入命令
->双击运行
使用git钩子达成一键部署
动手操作
实际操作过程中,可能出现各种奇葩问题,请不要气馁,多深呼吸,然后重启【误】。
本地配置
-
安装Git
-
下载
去这儿下载Git的安装包,然后安装。
-
配置
-
打开Git Bash
安装完成后,在任意地方右键,可以看到以下界面:
打开Git Bash,以后咱们操作几乎就都在这里了,之后就不重复讲如何打开了。
-
设置Git
需要设置Git的用户名,然后生成SSH密钥。具体操作如下:
$git config --global user.email "email@example.com" $git config --global user.name "user name"
打开Git Bash,将上面的
email@example.com
user name
替换成你自己的邮箱地址、用户名,然后复制进去,回车。注意,$
符号请不要复制进去,请使用全英文字符,包括后文中所有配置,请都勿用中文。
另外,在Git Bash中,Ctrl + C
意味着强制终止当前运行命令,而复制和粘贴,变成了:Ctrl + Shift + C
和Ctrl + Shift + Insert
.$ssh-keygen -t rsa -C "email@example.com"
然后再输入这个,生成SSH密钥,一路回车使用默认值即可。由于这个Key不是用于军事目的,无需设置密码,但是你要和我一样设置了的话,就要面临以后提交都要输入一次密码的窘境了。
成功之后,可以在用户主目录(C盘->用户->你的用户名)里找到.ssh目录,里面有id_rsa和id_rsa.pub两个文件。其中id_rsa.pub是公钥,只可以将这个文件分享出去。
-
-
-
安装 Node.js 和 Hexo
安装 Node.js 很简单,就官网下好了安装就是。
安装 Hexo 前请先确认装好了 Node.js,然后打开Git Bash,输入
npm install -g hexo-cli
回车
-
让博客在本地跑起来
到上一步结束,你已经在本地装好了所有需要的软件,也懂得了一些Git Bash的用法,接下来,我们就要在本地把你的博客跑起来。
找到一个你能记得很熟,又不是桌面这么暴露的位置建一个放你博客的文件夹。比如你可以选
D:\blog
,在D盘新建一个名叫blog
的文件夹就是(勿用中文)。打开这个文件夹,在文件夹里打开Git Bash,注意,这是为了避免让你输入多次
cd xx/xx
的命令,直接选中目录。当你操作成功后,你打开的Git Bash右上角就会有一串黄色的英文字母,是你放在本地的博客文件夹地址,请确认之后再进行后续操作。例如,你之前选择的是D:\blog
,那么这里就是/d/blog
-
输入:
$hexo init $npm install hexo-deployer-git --save $npm install hero-server --save $hexo g $hexo s
当一切正常,跑完之后就应该是这个样子:
$hexo s INFO Start processing INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
那么你访问这个
http://localhost:4000/
就能访问到你新生的博客了,虽然还有些简陋。如果想关闭,就在Git Bash中根据提示,按Ctrl + C
吧。另外扯一个奇葩问题,极少数情况下,你可能遇到说4000端口被占用,不能静态部署,解决这个问题最简单的方法是重启,或者你可以更改默认部署的端口,或者你可以杀死4000端口的进程,具体操作就不说了,能查到的。由于这部分命令是死的,不需要更改,所以我就解释一下这些命令的作用吧,不想看就跳过吧:
hexo init
初始化 Hexo,它会去下载原始版本的hexo到本地。
npm install hexo-deployer-git --save
和npm install hero-server --save
是两个重要的插件,用这个命令就能自动安装。
hexo g
生成网页,把配置啊,博客啊什么的,变成用户浏览的网页
hexo s
静态部署,就是弄成本地可以看的那种,可以用来测试效果
另外讲一个命令,生成网页前建议使用hexo clean
,清除之前生成的网页文件,这样可以大概率降低出现奇葩问题的概率。
至此,本地配置环境结束。如果你对自带的博客不满意,你可以去下载Hexo主题来美化你的博客,或者是下载更多插件来为你的博客添加一些神奇的效果,或者前端大佬自己可以动手改文件。
ps. 如果上面两个链接打不开,那可能是因为种花家的神秘力量。
pss. 选主题可以参考这里
服务器配置
俗话说的好,如果一个网站只能在本地访问,那它和普通文件有什么区别?
首先你需要能远程连接服务器。 由于不同服务器提供不同的特殊连接方法,这里无法提供全覆盖的策略。具体方法可以查询你购买商提供的帮助手册。
当你通过putty成功连接服务器后,出现的是一个黑框框,别惊讶,就是这样玩的,先使用root用户吧,有一些配置需要权限。
-
安装git和nginx
$apt-get update $apt-get install git-core $apt-get install nginx
第一句的
update
是更新列表 -
建立网站目录
和本地一样,网站也要有一个放东西的文件夹,由于nginx默认的目录是'var/www/html',所以我建议你使用'var/www/blog',当然,你用别的也可以,就请自己记住目录,下文也替换成你自定义的目录便是。
root用户建立目录:
$mkdir /var/www/blog
。之后再把原来nginx设置的'html'目录改成你的'blog'目录.
执行
$vim /etc/nginx/sites-available/default
这样将打开一个叫'default'的文件,由于你是命令行操作,所以你可能出现用鼠标点击窗口输入,结果却被命令行当傻子的情况,放松,新人都这样。
首先,你使用的编辑器叫'vim',你可能不清楚它,但它的名声在你不知道的领域可以说是响彻天际,他有很多特殊的操作技巧,在不能使用鼠标的情况下给编辑者提供了极大便利。不过你只需要修改几个文件,并不需要学习太多的命令,现在,你打开了这个文件,按'i'键开始编辑。
找到
root /var/www/html;
改成root /var/www/blog;
然后按'esc'退出编辑状态,按'Shift + ;'输出':',然后输入:'wq'按回车就保存了。
按':'切换到命令模式,'wq'命令:保存并退出
至此,服务器的配置就完了,可以重启一下你的服务器,或者使用命令:
$service nginx restart
更新博客只需要将你在本地生成的网页(
博客目录\.deploy_git
文件夹下所有文件)传到你服务器上的这个目录(/var/www/blog)就好了
优化
如果每次更新博客,我都得远程连接服务器,输入密码,上传文件,那我肯定要放弃自己整博客,转去用其他的博客网站。
那么有没有更好的解决方案呢?当然是有的,Hexo提供用Git一键部署,然后我们再在本地写好批处理文件,服务器上弄好钩子,以后更新就只是双击一下提交文件就好了。是不是听起来美滋滋?那么就来动手吧
使用命令行上传文件
如果你觉得用命令行上传文件很麻烦,请记住,这是优化的第一步。而且,如果你之前还没有上传过文件到服务器,你可以了解一下FTP/SFTP之类传文件的东西,你会难受到回来学优化的。
- 在服务器上建一个你自己的用户
在服务器上一直使用root
账户太危险了,何况你还是要远程连接快速提交的那种。你需要一个自己的用户,使用$adduser user_name
创建你的用户,user_name
替换成你起的用户名,注意,不能有中文。
然后给你自己调一下权限:
$chmod 740 /etc/sudoers
$vim /etc/sudoers
在编辑器中找到如下内容:
# User privilege specification
root ALL=(ALL:ALL) ALL
在其下方添一行:user_name ALL=(ALL:ALL) ALL
,(user_name为你的用户名,下文不再重复。)
然后再输入$chmod 440 /etc/sudoers
并回车。
至此,你的用户就建立好了。
用$su user_name
就可以切换到你的用户了,切换完成后,原来的root@xxxx
就会变成user_name@xxxx
- 建立一个Git仓库配合本地Hexo的部署
使用你的用户,执行命令:
$cd ~
$mkdir .ssh
$cd .ssh
$vim authorized_keys
$cd ~
$git init --bare blog.git
cd
进入目录,cd ~
表示进入当前用户的个人目录
mkdir
创建目录,.ssh
目录是用来ssh连接时验证的。
vim authorized_keys
这里编辑的是一个密钥文件,还记得之前本地装Git时配的SSH吗,把本地的弄到这里,就完成了本地和服务器的配对。忘记文件在哪了?用户主目录(C盘->用户->你的用户名)里找到.ssh目录,里面有id_rsa和id_rsa.pub
选中id_rsa.pub,右键记事本打开,把里面的东西全部复制,黏贴到服务器这里,然后保存就是。
忘记怎么操作Vim了?按'I'进入编辑状态,按'ESC'退出编辑状态,按':'进入输入命令状态,输入:'wq'保存。
git init --bare xxx
表示新建一个叫xxx
的,有git管理的文件夹(库)。这个文件夹就将是我们通过git更新博客的资料库。虽说这个xxx你可以自己改名字,而且还可以选不同的特殊目录,但是按照规范得有一个.git
后缀,不过只要你开心,而且记得住,那就随意吧,我这里及下文均用blog.git
作为这个文件夹的名字了,如果你自定义了目录,下文中注意替换。
- 配置本地部署相关
首先进入本地你选择的blog目录,如我上文举例的D:\blog
,打开该目录下的_config.yml
文件,如果你不知道怎么打开,邮件记事本就对了。
在里面找到:
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
...
改成这样:
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: user_name@xxx:blog.git
branch: master
其中user_name
为你建的用户的用户名,xxx为你买的服务器IP地址。
保存退出即可。
至此,你已经配置好Hexo d
提交文件到服务器了,只需在本地运行完hexo clean
和hexo g
之后运行hexo d
,就能将你的本地blog推送到服务器上(省去FTP/SFTP的步骤!)。
然后再远程连接服务器,root用户,运行$rm -rf /var/www/blog
删除之前部署的博客文件,然后运行$git clone /home/user_name/blog.git /var/www/blog
放上新的博客文件,整个部署过程就结束了。
配置Git钩子和批处理文件
每次更新都要链接服务器,还得弄命令行,麻烦爆!就不能弄成点一下鼠标就自动更新那样吗?本节就教你完成最后的魔幻操作
-
让你的用户接管博客更新的任务。
使用root用户,给你的用户权限:
$chown user_name:user_name -R /var/www
注意,
/var/www
是你定义的网站目录(/var/www/blog
)的前一个目录(/var/www
) -
配置Git钩子
使用你的用户,编辑钩子文件
vim /home/user_name/blog.git/hooks/post-receive
里面填写以下内容:
#!/bin/bash $rm -rf /var/www/blog $git clone /home/user_name/blog.git /var/www/blog
保存即可。
其实很明显,钩子就是一段在特定条件下会被触发自动执行的命令,这里就是让服务器在接收到本地的提交之后自动执行我们之前要执行的部署任务,命令都和之前一样
然后还有一个重要的事情,提供执行这段命令的权限:
chmod +x /home/user_name/blog.git/hooks/post-receive
-
本地使用批处理文件
既然服务器都能把命令写到文件里自动执行,那本地肯定也可以,他的名字叫:批处理
首先在你本地选择的blog目录(如文中例
D:\blog
),新建一个文本文件,名字随便起,就是别起中文。然后把里面的内容改成:
hexo clean hexo g hexo d read -n 1
保存。然后重命名把
.txt
后缀改成.sh
,如果看不到.txt
后缀,说明你没开,百度教程然后就完成了,双击这个文件就自动更新博客到服务器了,试试看?
当然,聪明的你肯定想到了,既然可以一键更新,那静态部署也可以写成批处理,不用每次都输命令。的确如此,而且也只需要把上面那个文件中的
hexo d
改成hexo s
就是静态部署文件的命令。
写在最后
好了,这篇文章花了我两三天的时间写,内容也比较面向萌新,科普向,希望阅读了本篇文章的你已经成功搭好了自己的博客,而且还学到了一些计算机使用的技巧。
本文到此结束,谢谢。