从零开始搭建Hexo博客

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的怒火),只是因为本文基于此配置。

本地配置

这个环节结束后,你将可以在自己这台电脑上访问你的博客

  1. 装好需要的软件,如git,Node.js,Hexo

  2. 初始化Hexo博客

  3. 更换主题【可选】

服务器配置

这个环节结束后,你的博客将正式向整个互联网开放!

  1. 安装需要的软件,如git,nginx

  2. 设置网站访问目录

  3. 上传本地博客到服务器上

优化处理

前两个环境结束后,你会发现有些地方的步骤太过繁杂,这个环节结束后,所有的操作将被你处理成傻瓜式。

  1. 使用批处理将输入命令 -> 双击运行

  2. 使用git钩子达成一键部署

动手操作

实际操作过程中,可能出现各种奇葩问题,请不要气馁,多深呼吸,然后重启【误】。

本地配置

  1. 安装Git

    1. 下载

      这儿下载Git的安装包,然后安装。

    2. 配置

      1. 打开Git Bash

        安装完成后,在任意地方右键,可以看到以下界面:

        gitbash

        打开Git Bash,以后咱们操作几乎就都在这里了,之后就不重复讲如何打开了。

      2. 设置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 + CCtrl + Shift + Insert .

          $ssh-keygen -t rsa -C "email@example.com"
        

        然后再输入这个,生成SSH密钥,一路回车使用默认值即可。由于这个Key不是用于军事目的,无需设置密码,但是你要和我一样设置了的话,就要面临以后提交都要输入一次密码的窘境了。

        成功之后,可以在用户主目录(C盘->用户->你的用户名)里找到.ssh目录,里面有id_rsa和id_rsa.pub两个文件。其中id_rsa.pub是公钥,只可以将这个文件分享出去。

  2. 安装 Node.js 和 Hexo

    1. 安装 Node.js 很简单,就官网下好了安装就是。

    2. 安装 Hexo 前请先确认装好了 Node.js,然后打开Git Bash,输入npm install -g hexo-cli回车

  3. 让博客在本地跑起来

    到上一步结束,你已经在本地装好了所有需要的软件,也懂得了一些Git Bash的用法,接下来,我们就要在本地把你的博客跑起来。

    1. 找到一个你能记得很熟,又不是桌面这么暴露的位置建一个放你博客的文件夹。比如你可以选D:\blog,在D盘新建一个名叫blog的文件夹就是(勿用中文)。

    2. 打开这个文件夹,在文件夹里打开Git Bash,注意,这是为了避免让你输入多次cd xx/xx的命令,直接选中目录。当你操作成功后,你打开的Git Bash右上角就会有一串黄色的英文字母,是你放在本地的博客文件夹地址,请确认之后再进行后续操作。例如,你之前选择的是D:\blog,那么这里就是/d/blog

    3. 输入:

      $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 --savenpm install hero-server --save是两个重要的插件,用这个命令就能自动安装。

      hexo g 生成网页,把配置啊,博客啊什么的,变成用户浏览的网页

      hexo s 静态部署,就是弄成本地可以看的那种,可以用来测试效果

      另外讲一个命令,生成网页前建议使用hexo clean,清除之前生成的网页文件,这样可以大概率降低出现奇葩问题的概率。

    至此,本地配置环境结束。如果你对自带的博客不满意,你可以去下载Hexo主题来美化你的博客,或者是下载更多插件来为你的博客添加一些神奇的效果,或者前端大佬自己可以动手改文件。

    ps. 如果上面两个链接打不开,那可能是因为种花家的神秘力量。

    pss. 选主题可以参考这里

服务器配置

俗话说的好,如果一个网站只能在本地访问,那它和普通文件有什么区别?

  1. 首先你需要能远程连接服务器。 由于不同服务器提供不同的特殊连接方法,这里无法提供全覆盖的策略。具体方法可以查询你购买商提供的帮助手册。

  2. 当你通过putty成功连接服务器后,出现的是一个黑框框,别惊讶,就是这样玩的,先使用root用户吧,有一些配置需要权限。

  3. 安装git和nginx

    $apt-get update
    $apt-get install git-core
    $apt-get install nginx
    

    第一句的update是更新列表

  4. 建立网站目录

    和本地一样,网站也要有一个放东西的文件夹,由于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之类传文件的东西,你会难受到回来学优化的。

  1. 在服务器上建一个你自己的用户

在服务器上一直使用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

  1. 建立一个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作为这个文件夹的名字了,如果你自定义了目录,下文中注意替换。

  1. 配置本地部署相关

首先进入本地你选择的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 cleanhexo g之后运行hexo d,就能将你的本地blog推送到服务器上(省去FTP/SFTP的步骤!)。

然后再远程连接服务器,root用户,运行$rm -rf /var/www/blog删除之前部署的博客文件,然后运行$git clone /home/user_name/blog.git /var/www/blog放上新的博客文件,整个部署过程就结束了。

配置Git钩子和批处理文件

每次更新都要链接服务器,还得弄命令行,麻烦爆!就不能弄成点一下鼠标就自动更新那样吗?本节就教你完成最后的魔幻操作

  1. 让你的用户接管博客更新的任务。

    使用root用户,给你的用户权限:$chown user_name:user_name -R /var/www

    注意,/var/www 是你定义的网站目录(/var/www/blog)的前一个目录(/var/www)

  2. 配置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

  3. 本地使用批处理文件

    既然服务器都能把命令写到文件里自动执行,那本地肯定也可以,他的名字叫:批处理

    首先在你本地选择的blog目录(如文中例D:\blog),新建一个文本文件,名字随便起,就是别起中文。

    然后把里面的内容改成:

     hexo clean
     hexo g
     hexo d
     read -n 1
    

    保存。然后重命名把.txt后缀改成.sh,如果看不到.txt后缀,说明你没开,百度教程

    然后就完成了,双击这个文件就自动更新博客到服务器了,试试看?

    当然,聪明的你肯定想到了,既然可以一键更新,那静态部署也可以写成批处理,不用每次都输命令。的确如此,而且也只需要把上面那个文件中的hexo d改成hexo s就是静态部署文件的命令。


写在最后

好了,这篇文章花了我两三天的时间写,内容也比较面向萌新,科普向,希望阅读了本篇文章的你已经成功搭好了自己的博客,而且还学到了一些计算机使用的技巧。

本文到此结束,谢谢。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266

推荐阅读更多精彩内容