搬瓦工VPS搭建自己的Hexo博客

之前为了上一些不存在的网站,在搬瓦工上花费19.99刀买了一年VPS。最近感觉主机只用来FQ有些浪费,正好近来有写博客的需求,就在NameCheap上买了域名,准备搭建自己的博客系统。尝试了WordPress、Ghost等系统后,决定使用Hexo。下面就把自己搭建的过程和中途遇到的坑写下来,算是个存档。

服务器设置

搬瓦工购买VPS后,通过网站右上角Client Area-Services-My Services可以看到自己购买的主机。通过KiviVM Control Panel可以对主机进行一些简单的操作,比如重装系统、更换机房等等(关于搬瓦工的详细内容,可以在搬瓦工中文网进行了解)。

进行服务器设置之前可以先进行系统的重装,我这里选择了centOS6,开始重装前,在Main controls里停掉当前主机,然后选择合适的linux发行版本,点击reload进行重装。几分钟后安装完成,记下root密码和SSH端口(一般是29962)。

我这里顺带给主机安装了宝塔面板,安装过程很简单,使用putty或者类似工具连接主机,跟官网文档走就可以,可能会有些耗时。安装宝塔成功后,登录宝塔面板,看自己需求安装LNMP或者单单安装Nginx。

ps:安装完宝塔后宝塔的防火墙可能会拦截某些端口,如果安装完你发现你的ss不能使用,请在面板-安全中放行ss端口。

本地设置

我的本地环境使用的Windows 10,因此下面所讲的都是基于windows 10的PC

安装和配置Git

下载适合自己系统的Git版本,一路下一步即可。

安装完成后,需要对Git进行配置,我们使用git bash来设置自己的用户名和email信息:

$ git config --global user.name "Your Name"
$ git config --global user.email "[email protected]"

接下来需要生成密钥文件,具体代码如下:

$ ssh-keygen -t rsa -b 4096 -C "[email protected]"

github上也有关于密钥生成和使用的相关说明

安装Node.js

下载适合自己系统的Node版本,我这里选择的可执行文件。windows的安装过程没什么好说的,一路next即可,注意中间有个选项Add to path,是添加环境变量的,一定要点上。

安装Hexo

打开git bash,在命令行里输入:

$ npm install -g hexo-cli

等待安装完成,这时候在本地的安装工作就结束了,接下来进行Hexo的相关配置

配置Hexo

Hexo常用命令

新建博客站点,将folder替换为你想创建博客的地址,比如我这里使用的是D:\hexo\blog,命令就是

hexo init /d/hexo/blog

$ hexo init <folder>
$ cd <folder>
$ npm install

创建完成后,文件目录如下:

.
├── _config.yml 配置文件
├── package.json 应用程序信息,默认安装了EJS, Stylus 和 Markdown renderer
├── scaffolds 模板文件夹
├── source 资源文件位置
|   ├── _drafts
|   └── _posts
└── themes 主题文件夹

如果需要修改博客标题和副标题,可以打开_config.yml修改title字段和subtitle字段。Hexo默认语言为英文,若需要修改,同样打开_config.yml,修改language: zh-Hans就是设置为简体中文。更多设置,参见Hexo配置文档

ps:这里需要注意,修改yml文件内容时,要在冒号:和后面value之间加一个空格,否则会报错

替换主题

Hexo支持多种主题,你可以在主题列表中选择自己喜欢的主题使用,这里以最流行的Next为例,替换主题的操作非常简单:

$ cd <folder>
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

之后打开博客根目录下的_config.yml,修改thems: 为thems: next,next主题支持四种不同样式,可以修改themes/next/_config.yml中的scheme来进行切换。

Next主题的相关设置可以在知了笔记进行查看。

新建博文并预览效果

$ cd <folder>
$ hexo new "your_blog_title"

这个命令是用于在source/_posts下生成一个命名的.md文件,效果等同于新建.md文件并拷贝至该处。

接下来我们将这个新建的博文生成静态文件并部署到本地来预览效果,过程也很简单:

$ cd <folder>
$ hexo generate
$ hexo server --debug

generate命令用于将md文件生成静态网页,server命令用于将博客系统发布到本地4000端口,这两个命令都可以进行简写,写作hexo g和hexo s。

ps:有时会出现4000端口被其他进程占用的问题,这里有两种解决方案:1.解除其他进程端口占用,2.使用hexo server -p 5000来修改端口并预览

上述命令完成后,就可以打开浏览器,输入localhost:4000就可以预览你刚刚生成的博文啦。

仓库设置

现在我们已经可以将博客系统在本机上进行模拟了,接下来我们就要将其部署到我们的VPS上。在此之前需要将代码托管至github等托管平台,我这里使用了github和coding.net。

github

新建一个项目,命名为***.github.io,***为你的github用户名,无脑下一步即可。

上传你的SSH Key到github,具体参见GithubHelp

Coding.net

新建空仓库,命名随意,随后上传你的SSH Key到Coding.net,比github还要简单,略过。

Hexo设置部署到远程仓库

接下来我们要设置将我们的blog目录整个提交到远端,打开根目录下的_config.yml,编辑如下一部分内容,切记将***替换成你自己的地址:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: 
    github: git@github.com:***/***.github.io.git,master
    coding: git@git.coding.net:***/***.git,master

保存后打开Git bash,输入以下命令:

$ hexo g && hexo d

前者是生成静态页面,后者是将代码提交到远端仓库,也就是我们刚刚设置的github与coding。

提交完成后打开你刚刚设置的github.io,是不是看到写好的博客了。

VPS拉取代码并绑定域名

我的vps使用的centOS,安装了宝塔面板,所以我采用了最简单的方式来绑定域名(前提是已经安装Nginx),当然你也可以不使用面板,使用命令行修改Nignx配置文件也是一样的效果。

宝塔面板点击网站-添加站点-输入域名,根目录,保存。

我这里根目录保存在/www/wwwroot/blog下。这时访问域名就会提示Nginx设置错误,先不管。

打开宝塔面板-文件,进入/www/wwwroot/blog,在该目录打开命令行,或者ssh打开命令行,进入该目录下。

输入命令:

$ git clone [email protected]:riceeater/riceeater.github.io.git

拉去完成后,再次访问你的域名,你就会发现博客系统已经部署上去了。

ps:你需要在VPS上重复上传SSH key到github的步骤

结语

到这里,我们在VPS上搭建自己的博客系统这一目标就基本实现了。

现在我们的创建流程是这样,本地机器打开命令行,使用hexo new新建博文,使用MarkDown工具编辑.md文件,使用hexo g命令生成静态文件,hexo d将代码push到远端仓库,再登录宝塔,打开blog所在目录输入命令行git pull。完成整个流程。

过程比较繁琐,我们后期可以加上webHook来实现自动化部署,即本机提交到github后,webHook会通知vps拉取最新代码,当然这个过程我们放到后面再说(其实是我还没搞懂)。

顺便推荐一个MarkDown工具Typora,简洁美观,如果官网打不开,点击备份下载地址

猜你喜欢

转载自blog.csdn.net/xiaomi987/article/details/79877567