Hexo搭建个人博客

写这篇的主要目的是记录自己在 windows 下使用 Hexo + next 搭建博客的一个过程，简便搭建小教程。

本文使用环境（win10、node.js、git、next 5.1.4、阿里云Centos7、阿里云购买的域名、nginx）

站点配置

站点搭建

使用 Hexo ，需要安装 node.js（官方建议 10.0 版本以上） 和 Git 程序 ，本文环境为 windows + 阿里云Centos7

npm install -g hexo-cli
hexo init <folder>
cd <folder>
npm install

folder 为站点文件夹，Hexo 的根目录

设置中文

站点根目录下的 **_config.yml** 文件，设置

language: zh-Hans

更改主题

使用如下命令安装 next 主题，需要其他主题可以参考 Hexo官网主题

cd your-hexo-site
git clone https://github.com/iissnan/hexo-theme-next themes/next

站点根目录下的 **_config.yml** 文件，修改你需要的主题

theme: next

本地搜索

站点根目录执行如下命令，安装 hexo-generator-searchdb ：

npm install hexo-generator-searchdb --save

安装后，至 **themes/next/_config.yml** 文件中修改 enable: true，即开启本地搜索功能（默认为关闭状态）

local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1

博文压缩

站点根目录下，执行如下命令安装 hexo-neat

npm install hexo-neat --save

安装成功后，在站点的 **_config.yml** 文件中添加如下配置（自行选择需要压缩的文件），后续执行 hexo g 将会对博文进行压缩，优化上传和访问的加载速度

# hexo-neat
# 博文压缩
neat_enable: true
# 压缩html
neat_html:
  enable: true
  exclude:
# 压缩css
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
# 压缩js
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'

主题配置

本站使用 next.Gemini，配置过程中可使用可在站点根目录下使用 hexo s --dubug 进行测试（大部分免重启服务即可查看效果）

设置菜单

**themes/next/_config.yml** 文件中开启需要的配置，相应的中文描述在 themes/next/languages/zh-Hans.yml 文件中可修改

menu:
  home: /
  archives: /archives
  #about: /about
  categories: /categories
  tags: /tags
  #commonweal: /404.html

设置头像

**themes/next/_config.yml** 文件中修改 avatar 的属性值，将其改成头像的具体路径，可以是完整的URL，也可以放在主题的 image 文件夹下面

avatar: /images/avatar.jpg

右侧边栏

**themes/next/_config.yml** 文件中修改（我比较习惯侧边栏在右边）

sidebar:
  # Sidebar Position, available value: left | right (only for Pisces | Gemini).
  #position: left
  position: right

浏览进度

**themes/next/_config.yml** 文件中开启（置顶按钮在右下角）

# Scroll percent label in b2t button.
  scrollpercent: true

如需要吸附侧边栏，需要做继续在 **themes/next/_config.yml** 中修改，开启 b2t

b2t: true

顶部进度条

**themes/next/_config.yml** 文件中开启

pace: true

去除强力驱动

进入 **themes/next/layout/_partials/footer.swig** 文件中，删除如下

{% if theme.footer.powered and theme.footer.theme.enable %}
  <span class="post-meta-divider">|</span>
{% endif %}

{% if theme.footer.theme.enable %}
  <div class="theme-info">{#
  #}{{ __('footer.theme') }} &mdash; {#
  #}<a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">{#
    #}NexT.{{ theme.scheme }}{#
  #}</a>{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}{#
#}</div>
{% endif %}

如果网站已备案，则可以再此处将其替换成你的备案号

<div class="BbeiAn-info">
    {{ __('某ICP备')}} -
    <a target="_blank"  href="http://beian.miit.gov.cn/">xxxxxxxx号</a>
</div>

代码复制

在 **themes/next/layout/_third-party** 文件夹下创建名为 copy-code.swig 的文件，并在文件中添加如下代码

  <style>
    .copy-btn {
      display: inline-block;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 700;
      line-height: 20px;
      color: #333;
      white-space: nowrap;
      vertical-align: middle;
      cursor: pointer;
      background-color: #eee;
      background-image: linear-gradient(#fcfcfc, #eee);
      border: 1px solid #d5d5d5;
      border-radius: 3px;
      user-select: none;
      outline: 0;
    }

    .highlight-wrap .copy-btn {
      transition: opacity .3s ease-in-out;
      opacity: 0;
      padding: 2px 6px;
      position: absolute;
      right: 4px;
      top: 8px;
    }

    .highlight-wrap:hover .copy-btn,
    .highlight-wrap .copy-btn:focus {
      opacity: 1
    }

    .highlight-wrap {
      position: relative;
    }
  </style>

  <script>
    $('.highlight').each(function (i, e) {
      var $wrap = $('<div>').addClass('highlight-wrap')
      $(e).after($wrap)
      $wrap.append($('<button>').addClass('copy-btn').append('复制').on('click', function (e) {
        var code = $(this).parent().find('.code').find('.line').map(function (i, e) {
          return $(e).text()
        }).toArray().join('\n')
        var ta = document.createElement('textarea')
        document.body.appendChild(ta)
        ta.style.position = 'absolute'
        ta.style.top = '0px'
        ta.style.left = '0px'
        ta.value = code
        ta.select()
        ta.focus()
        var result = document.execCommand('copy')
        document.body.removeChild(ta)

        if(result)$(this).text('复制成功')
        else $(this).text('复制失败')

        $(this).blur()
      })).on('mouseleave', function (e) {
        var $b = $(this).find('.copy-btn')
        setTimeout(function () {
          $b.text('复制')
        }, 300)
      }).append(e)
    })
  </script>

返回上一层文件夹，即 themes/next/layout 下，打开 **_layout.swig** 文件，在 body 闭合标签上方添加

{% include '_third-party/copy-code.swig' %}

主页文章缩略

即首页文章不显示全文，只显示预览部分

**themes/next/_config.yml** 文件中打开配置，可自行修改需要显示的字数长度

auto_excerpt:
  enable: true
  length: 150

底部版权

在 **themes/next/_config.yml** 文件中直接开启即可

post_copyright:
  enable: true
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

评论系统

站点使用 Valine 评论系统，官方入口，在 LeanCloud 上注册一个账号，登陆并访问控制台，创建免费应用，选择开发版本，之后在应用设置里面有个 应用 Keys 选项，进入复制 AppID、AppKey，并在 **themes/next/_config.yml** 文件中开启 Valine

valine:
  enable: true
  appid:  # 应用生成的 AppID
  appkey: # 应用生成的 AppKey
  notify: false # 邮件通知 , https://github.com/xCss/Valine/wiki
  verify: false # 评论是否需要验证码，建议关闭
  placeholder: 请在此处输入你的留言信息 # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size

服务器配置

开放服务器端口

服务器默认没有配置安全组规则，需要自行配置需要开放的端口信息，具体：进入云实例的安全组，开放 80 443 端口，具体请看 阿里云安全组配置

Git安装与配置

git 安装

yum install git

创建一个 git 账户

adduser git

添加账户权限，编辑 sudoers，找到 root ALL=(ALL) ALL 并在下方添加 git ALL=(ALL) ALL 并保存退出

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

为 git 用户设置密码

sudo passwd git

windows 生成密钥，密钥文件保存至 C:\Users\youname\.ssh 文件夹下面

ssh-keygen

切换git用户，创建 ~/.ssh/authorized_keys 文件，文件中保存 windows 中的 id_rsa.pub 文件内容，并赋予权限

su git
mkdir ~/.ssh
vim ~/.ssh/authorized_keys      # 将 windows 下的 id_rsa.pub 文件内容复制于此
chmod 600 /home/git/.ssh/authorzied_keys
chmod 700 /home/git/.ssh

重启 ssh 服务

service sshd restart

重启后，进入 windows 命令窗口，免密登陆 git 账户测试

ssh -v [email protected]

使用 root 账户创建目录

mkdir /var/repo                      # git仓库
chown -R git:git /var/repo
chmod -R 755 /var/repo
mkdir /var/www/hexo             # 网站根目录
chown -R git:git /var/www/hexo
chmod -R 755 /var/www/hexo
复制代码z

创建 git 仓库

su git
cd var/repo
git init --bare myblog.git

创建 git 钩子文件 post-receive，用于自动部署在 /var/repo/myblog.git 下

vim /var/repo/myblog.git/hooks/post-receive

在 post-receive 文件中添加以下内容

git --work-tree=/var/www/hexo --git-dir=/var/repo/myblog.git checkout -f

root 用户下修改文件所属用户，授予可执行权限

chown -R git:git /var/repo/hexoBlog.git/hooks/post-receive
chmod +x /var/repo/hexoBlog.git/hooks/post-receive

自此，仓库已创建完成

Nginx安装与配置

安装 nginx

yum install -y nginx

启动 nginx 服务器

systemctl start nginx

设置开机启动

systemctl enable nginx

进入/etc/nginx 文件下，将 nginx.conf 复制一份配置文件到 conf.d 下进行修改（也可以直接用在我的配置上进行修改），该配置文件用你的域名命名（容易识别）

cd /etc/nginx
cp nginx.conf conf.d/jrmaker.cn.conf

我的完整配置如下（含Hppts），阿里云上可免费申请 SSL 证书（控制台-域名-管理-开启SSL证书-申请免费证书）

server {
    listen      80;
    server_name jrmaker.cn;
    return 301 https://www.jrmaker.cn$request_uri;
}
server {
    listen      443;
    server_name jrmaker.cn;
    return 301 https://www.jrmaker.cn$request_uri;
}

# 有ssl证书的，没有可以忽略如下配置，需要将 root /var/www/hexo 添加到上方的 server 中
server {
    listen       443 ssl http2 default_server;
    listen       [::]:443 ssl http2 default_server;
    server_name  www.jrmaker.cn;
    root         /var/www/hexo;

    ssl_certificate "/var/ssl/blog/3427693_www.jrmaker.cn.pem";
    ssl_certificate_key "/var/ssl/blog/3427693_www.jrmaker.cn.key";
    ssl_session_cache shared:SSL:1m;
    ssl_session_timeout  10m;
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers on;

    location / {
    }

    error_page 404 /404.html;
    location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
    }
}

平滑重启 nginx

nginx -s reload

问题解决

URL Cannot GET /%20/

至 **themes/hexo/_config.yml** 文件下，找到下面位置，将 || 前面的 空格去掉

menu:? home: /|| home?
#about: /about/ || user?
tags: /tags/|| tags?
categories: /categories/|| th?
archives: /archives/|| archive?
#schedule: /schedule/ || calendar?
#sitemap: /sitemap.xml || sitemap?
#commonweal: /404/ || heartbeat

没有标签分类

使用如下命令创建一次即可

hexo new page tags
hexo new page categories

hexo d 后 ERROR Deployer not found: git

站点根目录下执行命令安装

npm install --save hexo-deployer-git

原文地址：https://www.cnblogs.com/jrMaker/p/12359364.html

时间： 2024-10-08 10:16:56

Hexo搭建个人博客的相关文章

使用Hexo搭建GitHub博客（2018年Mac版）

关于本文 本文仅记录自己学习搭建Hexo博客之时,搭建过程中掉坑的历程总结,对零基础起步的观众朋友可能缺乏某些基础技术的指导,请优先食用下述两篇优质教程: [2018更新]小白独立搭建博客-Github Pages和Hexo简明教程 - Ryane的个人页面 - 开源中国 GitHub+Hexo 搭建个人网站详细教程 ※ 为了更优质的排版视觉效果,欢迎移步到简书浏览:使用Hexo搭建GitHub博客(2018年Mac版) 十万个为什么 什么是Hexo 度娘谷歌搜索了Hexo各种资料解说,个人感觉

Linux下使用 github+hexo 搭建个人博客03-hexo配置优化

上两张文章,我们说了 hexo 部署.主题的切换.博文的创建.MarkDown 简单使用和 hexo 部署到 GitHub Pages. 也说了我们会使用 next 主题做为我们后期博客的使用和维护.但是该主题的原生态,可能或多或少不满足我们当前的需求,因此需要我们对其进行优化,达到我们想要的效果. 因此这篇文章和下篇文章主要就是针对主题的优化进行书写的. 注意事项 1.优化完毕或者新建博客后需要 hexo g 生成静态文件: 2.然后重新启动服务,使用命令 hexo s -p 80 3.浏览器

Linux下使用 github+hexo 搭建个人博客04-next主题优化

上篇我们说了 hexo 的优化,针对的站点的优化. 本篇讲解 next 主题的优化,包括:使用语言.前端页面显示宽度.菜单.侧栏.头像.添加或取消动画效果.打赏功能等等. 让页面排版更符合我们所要的功能和所想的风格. 可参考网站 http://theme-next.iissnan.com/getting-started.html 主题设定 选择 Scheme 修改 next 主题配置文件. 1 [[email protected] next]# pwd 2 /app/softinsall/hex

Hexo搭建个人博客（一）&mdash; 前期准备

最近几个月自学python的过程中,搜索爬虫资料的时候关注了xlzd的博客,为我开启了一片新世界,之后慢慢收藏了各方高人的博客.搭建一个自己博客的萌芽也悄然种下,也许是命运使然,在逛知乎的时候偶然间看到如何使用10个小时搭建出个人域名而又Geek的独立博客?,得到了浇灌的萌芽开始茁壮生长.经过几天不懈的没日没夜的努力,解决了各种问题(ps:因为一个bug曾让我一度对自己感到绝望),终于把自己的博客搭建成功.接下来我就把我走过N多弯路后的经验传授给大家,让大家少走弯路轻松愉快地搭建自己的Hexo博

GitHub与Hexo搭建个人博客

GitHub与Hexo搭建个人博客 安装node.js ? 自己百度 安装Git ? 自己百度 创建GitHub仓库 安装hexo ? npm install -g hexo-cli 新建文件夹 初始化文件夹 ? hexo init 安装依赖包 ? hexo install 安装hexo-deployer-git ? npm install hexo-deployer-git --save 在 _config.yml 文件中配置如下 把项目部署到github中的lsqstudy.github.i

基于Hexo搭建个人博客网站

## 准备工作 首先下载[nodejs](https://nodejs.org/en/download/),一路next安装即可.验证是否安装成功: ```bash node -v # 输出 v10.15.1 npm -v # 输出 6.8.0 ``` 接下来更改npm的安装源,这能大大加快安装包的速度. ```bash npm get registry # 输出默认源 https://registry.npmjs.org/ npm config set registry http://regi

github page 和 hexo 搭建在线博客

目录: 安装node.js与git 常用git命令 安装hexo 配置hexo hexo发布到github 1.安装node.js和git工具 https://nodejs.org/en/ 直接下载安装Node.js,有的IDE自带node.js,比如vs2015. 控制台中输入npm查看node.jd是否安装完成 https://git-for-windows.github.io/ windows版的git https://desktop.github.com/ github for wind

hexo 搭建静态博客 + Next 主题配置

参考手册 HEXO:https://hexo.io/zh-cn/ NEXT:http://theme-next.iissnan.com/ 安装hexo npm install hexo-cli -g 或者可以局部安装 hexo npm install hexo -S 初始化博客 hexo init xxx 或者进入到一个空文件夹里,执行:hexo init 网站配置文件详解 # Hexo Configuration ## Docs: https://hexo.io/docs/configurat

Linux下使用Hexo搭建github博客

找到一篇靠谱的博客,备份一下: ---------以下原文------------------ Nodejs安装 因为hexo是基于nodejs的应用,所以要先安装nodejs才可以.我这里以Ubuntu为例,因为我自己一直在使用ubuntu.使用如下命令即可: sudo apt-get install nodejs sudo apt-get install npm Hexo安装 Hexo 是一个功能强大的静态网站生成系统,快速.简洁.高效.Hexo 支持 GitHub Flavored Mar

Git+Hexo搭建静态博客网站

Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页. 安装环境 安装Git 版本管理工具,可以将我们生成的静态网页托管到GitHub上 设置全局 git config --global user.name "name" 配置username git config --global user.email "邮箱" 配置邮箱 设置ssh ssh -keygen -t rsa -