博客搭建

Hexo使用指南（五）——遇到的问题，以及如何解决

Hexo—如何设置文章目录（TOC）

Hexo部署到服务器大写开头的标签出现404

代码高亮

只需要在`后面加上使用的语言，比如使用JavaScript,就这么写

如何给博客加统计人数的功能

Hexo搭建教程

博客搭建

Hexo使用指南（四）——如何将 hexo 博客部署到腾讯云的服务器上

本篇内容用来讲述如何将 hexo 博客部署到腾讯云的服务器上。只要通过三步即可成功部署：

  1. 云服务器端 git 的配置
  2. Nginx 的配置
  3. 本地端 hexo 的设置更改

前期需要准备：

  1. 一个腾讯云服务器
  2. hexo 本地博客
    顺便说下我的服务器环境：

1. 进入云服务器中

首先点击下边网站，登录你的进入云服务器的控制台腾讯云服务器的控制台：
https://console.cloud.tencent.com/cvm/index
左边菜单选择云主机，然后找到你的服务器。点击登录

输入密码，进入 云服务器 CentOS中。（初始密码在控制台右上角的消息列表中）

2. 云服务器端配置 git

1.安装依赖库和编译工具安装依赖库：

1
yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel

2.安装编译工具：bash

1
yum install gcc perl-ExtUtils-MakeMaker package

3.下载 git

选择一个目录来存放下载下来的 git 安装包。这里选择了/usr/local/src 目录cd /usr/local/src到官网找一个新版稳定的源码包下载到 /usr/local/src 文件夹里

1
wget https://www.kernel.org/pub/software/scm/git/git-2.16.2.tar.gz

4.解压编译 git

  • 在当前目录下解压 git-2.16.2.tar.gz

    1
    tar -zvxf git-2.16.2.tar.gz

  • 进入git-2.16.2.tar.gz 目录下

    1
    cd git-2.16.2

  • 执行编译

    1
    make all prefix=/usr/local/git

-安装 git 到 /usr/local/git 目录下

1
make install prefix=/usr/local/git

5.配置 git 环境变量

  • 将 git 加入 PATH 目录中

    1
    echo 'export PATH=$PATH:/usr/local/git/bin' >> /etc/bashrc

  • 使 git 环境变量生效

    1
    source /etc/bashrc

  • 查看 git 版本

    1
    git --version

如果此时能查看到 git 的版本号，说明我们已经安装成功了。

6.创建 git 仓库，用于存放博客网站资源。

在home/git 的目录下，创建一个名为hexoBlog的裸仓库（bare repo）。如果没有home/git 目录，需要先创建；然后修改目录的所有权和用户权限。

1
2
3
mkdir /home/git/
chown -R $USER:$USER /home/git/
chmod -R 755 /home/git/

然后，执行如下命令：

1
2
cd /home/git/
git init --bare hexoBlog.git

刚才这一步主要创建一个裸的 git 仓库。

7.创建一个新的 git 钩子，用于自动部署。

  1. 在/home/git/hexoBlog.git下，有一个自动生成的hooks 文件夹。我们需要在里边新建一个新的钩子文件post-receive。

    1
    vim /home/git/hexoBlog.git/hooks/post-receive

  2. 按i 键进入文件的编辑模式，在该文件中添加两行代码（将下边的代码粘贴进去)，指定 Git 的工作树（源代码）和 Git 目录（配置文件等）

    1
    #!/bin/bashgit --work-tree=/home/hexoBlog --git-dir=/home/git/hexoBlog.git checkout -f

然后，按 Esc 键退出编辑模式，输入”:wq“ 保存退出。3. 修改文件权限，使得其可执行

1
chmod +x /home/git/hexoBlog.git/hooks/post-receive

到这里，我们的 git 仓库算是完全搭建好了。下面进行 Nginx 的配置。

3. 云服务器端配置 Nginx

1.安装

1
Nginxyum install -y nginx

2.启动

1
Nginxservice nginx start

3.测试 Nginx 服务器

1
wget https://127.0.0.1(你的购买服务器的ip地址）

能够正常获取欢迎页面说明Nginx安装成功。

1
2
3
4
5
6
7
8
Connecting to 127.0.0.1:80... connected.
HTTP request sent, awaiting response... 200 OK
Length: 43704 (43K) [text/html]
Saving to: ‘index.html’

100%[=======================================]]>] 43,704      --.-K/s   in 0s

2018-03-09 23:04:09 (487 MB/s) - ‘index.html’ saved [43704/43704]

  • 测试网页是否能打开在浏览器中输入服务器 ip 地址，就是服务器的公网 ip。

    4.配置 Nginx 托管文件目录

  • 接下来，创建 /home/hexoBlog目录，用于Nginx 托管。

    1
    2
    3
    mkdir /home/hexoBlog/
    chown -R $USER:$USER /home/hexoBlog/
    chmod -R 755 /home/hexoBlog/

  • 查看 Nginx 的默认配置的安装位置

    1
    nginx -t

  • 修改Nginx的默认配置，其中 cd 后边就是刚才查到的安装位置（每个人可能都不一样）

    1
    vim /etc/nginx/nginx.conf

  • 按方向键，找到如下位置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    server {
        listen 80 default_server;
        listen [::]:80 default_server;
        root /home/hexoBlog;    #需要修改

        server_name www.bujige.net; #需要修改

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
        location / {
        }
        error_page 404 /404.html;
            location = /40x.html {
        }

  • 按i键进入插入模式，将其中的 root 值改为 /home/hexoBlog （刚才创建的托管仓库目录）。将 server_name 值改成你的域名。

  • 重启Nginx 服务
    1
    service nginx restart

至此，服务器端配置就结束了。接下来，就剩下本地 hexo 的配置更改了。

4. 修改 hexo 站点配置文件 git 相关设置

1.修改_config.xml

  • 打开你本地的 hexo 博客所在文件，打开站点配置文件（不是主题配置文件），做以下修改。
    1
    2
    3
    4
    deploy:
        type: git
        repo: root@你的云服务器的IP地址:/home/git/hexoBlog
        branch: master

在 hexo 目录下执行部署，试试看。cd你的 hexo 目录

1
2
3
hexo clean
hexo generate
hexo deploy

2.hexo问题

先hexo g再执行hexo d布署，也可使直接用hexo d -g

hexo 更新到3.0之后，deploy的type 的github需要改成git

在执行 hexo deploy 后,出现 error deployer not found:git 的错误处理
输入代码：

1
npm install hexo-deployer-git --save

打开你的公网 IP，看是不是已经部署成功了。
最后一步，更改域名解析。这一步不再做介绍。

博客搭建

Hexo使用指南（三）——Hexo框架的博客主题安装

主题

1
https://hexo.io/themes/

我使用的主题是Next

1
https://github.com/iissnan/hexo-theme-next

进去网站之后，根据文档操作即可。
1.进入响应的文件路径图

1
2
3
$ cd hexo
$ ls
_config.yml  node_modules  package.json  public  scaffolds  source  themes

2.克隆项目

1
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

3.修改_config.yml

1
theme: next

4.默认是英文，我能还需要在_.config.yml修改语言

1
language: zh-Hans

5.评论支持。(_.config.yml)
NexT拥有原生支持DuoShuo和Disqus评论系统。

将以下代码段添加到您的_config.yml：

1
2
3
duoshuo：
   enable：true
  shortname：your-duoshuo-shortname

6.我们重新启动服务器

1
hexo server

博客搭建

Hexo使用指南（二）——Hexo框架的基本结构与打包后的文件介绍

Hexo框架的基本结构与打包后的文件介绍

目录结构概念

  • node_modules:里面有一些node组件
  • scaffolds:里面有一些定义好的结构
  • source:里面放了你写的markdown文件
  • themes:主题，可以对主题进行更改
  • config.yml:配置文件
  • .gitignore:git管理文件
  • db.json:生成的数据，文件管理
  • package.json:管理npm，更新等等
  • package.lock:npm管理

    生成静态网站的命令

使用 Hexo 生成静态文件快速而且简单。

1
2
$ hexo generate
$ hexo g

如图：

博客搭建

Hexo使用指南（一）——Hexo框架的本地安装与运行

Hexo框架的本地安装与运行

安装 Hexo 相当简单。然而在安装前，您必须检查电脑中是否已安装下列应用程序：

  • Node.js
  • Git
    博主，没有安装这两个程序，请自行上网安装

hexo 安装

1
$ npm install -g hexo-cli

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

新建完成后，指定文件夹的目录如下：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

启动服务器

1
hexo server

打开浏览器，输入下面地址可以访问

1
http://localhost:4000

Hello World

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment