在服务器上搭建hexo博客

原文地址: https://yuxiang.ren/2017/04/24/use-hexo-on-aliyun-and-update-with-git/

• 本文基于https://hexo.io 博客框架. 基于Node.js
• 本文所使用的阿里云服务器系统为: Ubuntu 16.04.2 LTS
• 本地测试环境为: MacOS 10.12.4
• 本文为本人自己搭建博客环境时所记录的步骤, 他人按照此步骤 可能会出现我没有遇到的问题, 请自行百度/google
• 本文非图文并茂, 全程都是命令行, 也没有什么图可以贴的
• 为了防止命令输入错误, 可以直接command+c
• 大致为: 在本地电脑上使用hexo撰写文章, 部署并测试成功后, 通过git提交到服务器上.完成博客的更新
  1. 首先在服务器上部署web环境,以及git等
  2. 然后在本地电脑上安装hexo, git等所需环境
  3. 撰写文章并且更新
  4. 其他完善: 主题, 插件,SEO等...
• 初来乍到, 勿喷......

一. 准备工作

1. 云服务器: 这里我使用的阿里云服务器ECS, 需要配置web环境,git等
2. 本地测试环境: 需要安装hexo, git等
3. 域名(非必须)

二. 配置服务器端

• 说明: 为方便,下文中的yuxiang.ren(域名),106.14.9.43(主机ip)...请自行替换

1. 登录服务器

   • ssh root@ip

2. 安装所需服务

   • 依次执行下面命令(过程有点漫长, 耐心等待)

      apt update && apt upgrade -y # 14.04 使用apt-get
      apt install git -y
      curl -sL https://deb.nodesource.com/setup | bash
      apt install nodejs -y
      apt install nginx -y
      cd /etc/nginx/sites-available
      rm -rf default
     

   • 访问ip106.14.9.43出现nginx默认页面表示nginx安装成功,后面还需要对ngin进一步配置

3. 安装git并且初始化git仓库

   • 依次执行一下命令

     cd ~
     mkdir repos && cd repos
     mkdir yuxiang.ren.git && cd yuxiang.ren.git #yuxiang.ren.git 为存放博客的git仓库(.git后缀) 名称并没有什么要求, 我只是为了方便才这样写的
     git init --bare
     cd hooks
     touch post-receive
     vi post-receive #此命令是编辑`post-receive`文件, 也可在本地编辑完上传到对应目录替换
     

4. 在出现的编辑页面中输入以下内容,注意yuxiang.ren的替换,然后保存退出。

   • 这是一个自动更新博客源文件的脚本, 将仓库里的源文件拷贝到对应博客的源文件目录

   #!/bin/bash -l
   GIT_REPO=$HOME/repos/yuxiang.ren.git
   TMP_GIT_CLONE=$HOME/tmp/git/renyuxiang.ren
   PUBLIC_WWW=/var/www/yuxiang.ren #网站的根目录 如果`wwww/` 下没有该文件夹 需要手动创建
   rm -rf ${TMP_GIT_CLONE}
   git clone $GIT_REPO $TMP_GIT_CLONE
   rm -rf ${PUBLIC_WWW}/*
   cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}
   cd ~
   exit
   

5. 执行下面命令

   • chmod +x post-receive

6. 配置nginx.conf文件(配置nginx服务器)

   • vi /etc/nginx/nginx.conf (也可在本地编辑完上传到对应目录替换)

   • 在http 里添加一下内容

     server {
         listen 80; # 监听80端口(http), 如需配置https 可自行百度
          server_name yuxiang.ren www.yuxiang.ren; # URL名字, 需要去域名服务商解析, 如何解析 自己百度
         root /var/www/yuxiang.ren/public/; # 这个是网站的根目录 要与上面`PUBLIC_WWW`一致
         index index.html index.htm index.txt; #这个是让nginx默认读取的文件名
     }
     

   • 保存退出

   • 重启nginx : service nginx restart

     • 如果重启失败 可通过nginx -t错误路径以方便处理错误

   • 这时候访问106.14.9.43 出现的应该是nginx 404页面

三. 配置本地环境

• 可能需要安装Xcode命令行工具, 我也不清楚, 因为我电脑本就安装了Xcode, 所以可以直接使用

1. 安装 Homebrew

   • /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. 安装Node.js

   • brew install node

3. 选择博客存放目录我放在文档目录下

   • cd ~/Documents

4. 将刚刚再服务器上创建的仓库clone到文档目录下

   • git clone [email protected]:repos/yuxiang.ren.git
     • 106.14.9.43 为主机ip地址
     • repos/yuxiang.ren.git 为博客的仓库路径
   • 会让你输入服务器登录密码
   • 然后clone一份空的git仓库

5. 给本地电脑安装Hexo

   • npm install -g hexo-cli

6. 初始化Hexo

   • 进入刚刚从服务器clone下的yuxiang.ren文件夹

   • 依次执行下面命令

     hexo init #初始化 一个博客环境, 需要下载相关文件,耐心等待
     hexo d -fg #部署
     hexo s #开启本地预览服务
     

   然后访问 http://localhost:4000 (本地的4000端口)如果看到网页表示Hexo配置成功

• 更多hexo配置请访问官网 https://hexo.io

四. 提交到服务器

1. git的更新命令如下

   • 进入博客目录

   • 执行以下命令更新

     git add . #把需要更新的所有文件添加到本地仓库
     git commit -m "update message" # 提交到本地仓库
     git push # 提交到远程仓库 这里只服务器
     

   • 如果提示需要输入密码 输入服务器密码即可

2. 如果提交的时候提示cp: target '* * *' is not a directory意思是这不是一个目录, 所以要去创建一个目录

   • 上文PUBLIC_WWW表示网站的根目录,
   • 直接执行mkdir /var/www/yuxiang.ren 创建网站根目录
   • 再次提交
     • 提示Everything up-to-date
     • 那就随便改一下重新部署并提交呗

五. 博客的配置, 主体更换,

插件: https://hexo.io/plugins/

主题: https://hexo.io/themes/

…...

自行 百度/Google

六. 发布文章

1. 进入网站根目录

2. hexo new 文章名字

3. 编辑/source/_posts/文章名字.md 文件使用的是MarkDown语法

    title: title  #文章的标题
    date: yyyy-mm-dd #创建时间
       categories: category #分类
       tags: tag #标签
          
       #多标签请这样写：tags: [tag1,tag2,tag3]
       #或者这样写： 
        #tags: 
          #- tag1
          #- tag2 
          #- tag3 
       ---  
         
       #正文
   

4. 正文写完后可以再本地此时下

   • hexo d -fg
   • hexo s
   • 然后访问 http://localhost:4000

5. 提交到服务器

   git add .
   git commit -m "操作内容"
   git push
   

七. 域名绑定

自行 百度/Google

八. 最后

当然你也可以放在Github上, 请自行 百度/Google