Vultr+宝塔+Hexo+Git建博客-[5]Hexo建立博客

October 23, 2020 4465

【搭建博客的步骤】

【思路】

Hexo作为博客的框架，在本地安装配置写好之后，渲染成静态HTMl文件。
利用git将渲染好的静态文件push到服务器的仓库中。
再利用git-hooks自动将服务器中的仓库checkout到网站的根目录中。
设置nginx的root地址为网站的根目录，最后就可以访问到我们的博客啦！

这篇文章是介绍步骤5：Hexo建立博客，配属到服务器。

终于到最后一步啦，也是最重要最麻烦的一步啦。

一. 本地安装和设置Hexo

  • 首先需要在本地安装好git和node.js

    官网下载git

    官网下载node.js

    安装好使用下面代码进行查看

    1
    2
    git --version
    node --version

  • 安装Hexo

    1
    npm install hexo-cli -g

  • 新建文件夹放我们的博客

    1
    2
    mkdir web-blog
    cd web-blog

  • 初始化Hexo

    1
    2
    3
    4
    hexo init
    npm install
    hexo g # 渲染 Source 目录下文件问静态页面
    hexo s # 启动hexo服务， http://localhost:4000/ 查看博客效果

二. 服务器端设置git仓库

  • 新建一个用户，专门进行git操作

    1
    2
    adduser web_git
    passwd # 随便设置一下

  • 给新建的web_git用户设置权限

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    chmod 740 /etc/sudoers
    # 查看下面文件内容
    vim /etc/sudoers
    # 找到以下内容
    ## Allow root to run any commands anywhere
    root    ALL=(ALL)     ALL
    # 在下面添加一行
    git ALL=(ALL) ALL
    # 保存后改回权限
    chmod 400 /etc/sudoers

  • 使用web_git用户配置SSH

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    su web_git # 切换到web_git用户
    cd /home/web_git # 切换到该用户的目录下面
    mkdir ~/.ssh   # 创建.ssh文件夹
    vim ~/.ssh/authorized_keys  # 创建authorized_keys文件并编辑
    # 在本地生成公钥复制到上面的文件中
    ## 本地运行下面命令
    ## ssh-keygen -b 4096 -C "web_git@服务器ip地址"
    ## 会生成一个~/.ssh/id_rsa.pub文件
    ## cat ~/.ssh/id_rsa.pub | pbcopy #进行复制
    # 复制完成后，保存关闭authorized_keys，修改相应权限
    chmod 600 ~/.ssh/authorzied_keys
    chmod 700 ~/.ssh
    # 在本地查看配置是否成功
    ssh  web_git@服务器ip地址

  • 使用web_git用户在服务器建立git仓库

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    cd /home/git #切换到该用户的目录下面
    git init --bare blog.git   # 创建git裸仓库，命名为blog.git

    cd /home   # 在home下面建立/public/blog，渲染好的HTML文件将会存放在这里
    mkdir public # 网页的根目录也为这个路径/home/public/blog
    cd public
    mkdir blog

    cd /home  # 在home下面建立/tmp/blog，临时暂存文件
    mkdir tmp
    cd tmp
    mkdir blog

  • 设置git hook

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    cd /home/web_git/blog.git/hooks/
    cp post-update.sample post-update # 修改样例文件
    vim post-update
    # 输入以下的内容
    #######内容开始部分########
    #!/bin/bash
    echo "Im update"
    GIT_REPO=/home/web_git/blog.git
    TMP_GIT_CLONE=/home/tmp/blog
    # 这里 /home/public/blog 目录作为网站的根目录
    PUBLIC_WWW=/home/public/blog
    rm -rf ${TMP_GIT_CLONE}
    git clone $GIT_REPO $TMP_GIT_CLONE
    rm -rf ${PUBLIC_WWW}/*
    cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}
    #######内容结束部分########

    # 当我们从本地提交的时候，会在服务器上clone出我们上床的文件到网站根目录
    # 然后再使用nginx读取这些文件就可以了
    # 保存退出之后给这个文件可执行的权限
    chmod +x post-update

    # 检查blog.git、.ssh、web_git、tmp的目录的用户权限组是否都为web_git:web_git
    # 如果不是，修改权限为web_git
    sudo chown web_git:web_git -R /home/public/blog
    sudo chown web_git:web_git -R /home/git/blog.git

  • 服务器端设置nginx

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    cd /www/server/nginx/conf # 宝塔将nginx的conf文件都放在这个目录下面了
    cp nginx.conf nginx.conf.bak # 先备份以下再修改
    vim nginx.conf
    # 修改以下部分
    #######内容开始部分########
    server
        {
            #listen 888;
            #server_name phpmyadmin;
            listen 80 default_server;
            server_name 你的域名（有www和没有www的两个，逗号隔开）;
            index index.html index.htm index.php;
            root /home/public/blog; #这里是网站的根目录
    	    # root  /www/server/phpmyadmin;
            
            location ~ /tmp/ {
                    return 403;
            }
    #######内容结束部分########

    cd /www/server/panel/vhost/nginx/ # 宝塔将nginx的你的网站的conf文件放在这个下面了
    vim 你的网站域名.conf #修改这里面的配置
    # 修改部分
    #######内容开始部分########
    server
        {
            # 这里也将root修改为我们网站的根目录
            root /home/public/blog; #这里是网站的根目录
    #######内容结束部分########

    # 修改完成后进行重新启动
    service nginx restart
    nginx -t    # 查看配置是否成功

三. 将本机的Hexo文件上传到服务器

  • 查看本地建立的博客文件夹web-blog，修改_config.yml文件

    1
    2
    3
    4
    5
    deploy:
        type: git
        repo: web_git@服务器ip:/home/web_git/blog.git # 这里是服务器的git仓库
        message: blog update
        branch: master

  • 部署到服务器
    本地的Hexo文档编辑好了之后，使用下面命令即可上传到服务器。

    1
    hexo d

Tips：

  1. /home/web_git/blog.git #这里是服务器的git仓库
  2. /home/public/blog #这里是网站的根目录
  3. 注意服务器上web_git用户的权限问题
  4. 光配置/www/server/nginx/conf的root信息是不足够的，还要记得修改/www/server/panel/vhost/nginx/的root信息

报错总结

1. 在nmp安装hexo时报错

1
Error: EACCES: permission denied, access '/usr/local/lib/node_modules'

如错误所说这里是因为没有权限。
解决办法，在安装时加上sudo

1
sudo npm install hexo-cli -g

2. 在本地hexo部署的时候，报错

1
remote: fatal: could not create leading directories of '/home/tmp/blog': Permission denied

这里出现错误之后，根本就没有把本地的静态HTML上传成功。
出现错误的原因是，虽然web_git用户有/home/web_git/和/home/public/的权限，
但是没有/home的操作执行权限。
解决办法，为web_git用户修改/home的操作执行权限。

1
sudo chown web_git:web_git -R /home

3.安装Hexo主题zhaoo 之后，摄影相册显示不出来，hexo g报错

1
hexo SyntaxError: Unexpected token / in JSON at position 26

按照安装配置的说明,创建好json文件，以及data文件。
但是应该将data文件设置为_data。表示不解析目录，是hexo默认做素材的文件夹。


到这里最终的部署就完成啦！(完结撒花的快乐！)

一共花了两天的时间，从0开始到部署完没有报错，并写下了这系列满是精彩(血泪)的文章。
比起我第一次用github建博客用的时间少多了。
而且我痛下决心要把这个过程记录下来。写这些文章是复盘，不是我当时建的过程。
因为过程就是报错，头痛，想办法解决，再报错，再解决的过程啊。

很高兴写下这篇记录。

如果有人能够看到希望对你有帮助。

继续利用这片天地做想做的事情呀～

查看评论