搭建hexo+next博客

发表于 分类于 阅读次数： 本文字数： 5.1k 阅读时长 ≈ 13 分钟

首先配置云服务器,然后可以开搞啦！我们选择知名的博客系统来搭建！

建博客容易，维护博客难。其实选择什么框架不重要，重要的是你能坚持一直更新，产出内容，不管是给自己看，还是给别人看。

博客系统比较

Hexo静态网站

20220430221525

  • 插件和可扩展性，社区支持好，成熟方案多，遇到问题基本上都能在网上搜到答案。
  • 一键部署到github或者自己的服务器git上，不需要开启浏览器，完美
  • 简单对接gitalk评论系统，拥有next主题的沉稳，还有butterfly主题的绚丽，方便定制友链/留言板，perfect
  • 快速/简洁/高效，沉浸式markdown写作，这正是我想要的！

总结：你们已经知道我要选择谁了

Huge静态网站

20220430223739

  • 高端大气上档次的go语言，想来会给我丝滑般感受。如果你有几百篇Markdown的文章要渲染，它可以在几秒内完成，而Hexo则可能会话费比较长时间
  • 从低调奢华有内涵的主页来看，配置要比Hexo更简单一些，也确实如此
  • 用Hugo的人没有Hexo的多，意味着Hugo的主题也比较少，你遇到问题了，想要解决，可能会花更多的时间

总结：不怕死的上！追求奢华的上！

TypeEcho动态建站

20220430224704

  • 主页不是https差评。逼格不够
  • 非常轻量，整个文件大小才385KB（Wordpress最新版本5.8是16.5MB）而且用的人非常多，也有非常多好看的主题。
  • 如果你的服务器配置不高（512M内存或是更低），那十分推荐这个博客框架，基本上可以满足你对博客的需求，而且不像Hexo和Hugo，Typecho是带后端的，意味着只要你能上网，你就可以自由地写你的文章，不会被设备所拘束。当然，你也不用去本地电脑上配置复杂的环境。

总结：对于单纯想写博客，不像搞的花里胡哨的，服务器配置有限，同时也不想花费太多时间去折腾优化博客的同学，非常推荐你使用Typecho。在我看来，这是一款努力向静态靠近的动态框架，而作为动态来讲，我会感觉束手束脚（因为要开一个浏览器，太被动了）

Wordpress动态建站

tupian

  • 玖月奇迹：中国范儿就是这么的气派，中国范儿就是这么这么帅！
  • 不多说了，截至20022年5月的统计，全球所有网站中，有超过43%的网站采用WordPress方式搭建，也就是说每5个就有2个是用WordPress搭建的，小到一个个人博客，大到美国白宫官方网站。
  • WordPress最开始是一款个人博客系统，并逐步演化成一款内容管理系统软件。不仅仅可以搭博客，它还可以搭一个论坛，它甚至还可以搭一个商城。生态丰富，插件多。你能想到的功能，区块链啦，什么啦，99.9% Wordpress都有，利用庞大的插件库，你可以完成你对网站的一切幻想。
  • 臃肿，由于功能过于强大，Wordpress与上面几个博客框架相比，显得非常臃肿，尤其是当你的博客内容多了之后，需要你有一定的网站优化能力（当然这个可以慢慢学，也有很多插件可以帮上忙）比较占用服务器资源，建议服务器内存有1GB左右。
  • 学习成本高。你要会php，并且你接触不到本质，你在各种主题和插件之间来回跳动，然而你不知背后到底做了什么

总结：不是狠人不要用。会消磨掉你大量时间

Hexo博客搭建

本地环境安装

Hexo安装

hexo是一个js包，在这之前必须保证node安装正常

sudo npm install -g npm
sudo npm install -g n
sudo n stable
npm install -g hexo-cli # 安装hexo

项目初始化

hexo init <folder> #初始化hexo项目
cd <folder>
npm install
npm un hexo-renderer-marked hexo-theme-landscape
#安装本文后续依赖项
npm install eslint hexo-abbrlink hexo-deployer-git hexo-directory-category hexo-filter-nofollow hexo-generator-baidu-sitemap hexo-generator-feed hexo-generator-searchdb hexo-generator-sitemap hexo-helper-live2d hexo-generator-tag hexo-renderer-pandoc hexo-renderer-markdown-it-plus hexo-next-darkmode hexo-recommended-posts hexo-submit-urls-to-search-engine hexo-symbols-count-time --save 
sudo npm i -g npm-check-updates

项目本地测试

hexo generate #生成静态网站
hexo server # 启动http服务

访问http://localhost:4000/ 至此hero就搭建好了。可以在本地访问了

注意,如果你安装了hexo-admin,就要访问http://localhost:4000/admin,就没有博客界面了

远程环境部署

一般来说,部署到github或者gitee上是一个不错的选择,他们提供了pages服务,一旦你往这个特殊的pages仓库推送文件,他们就把这个仓库当成一个静态网站去展示,我们可以通过他们提供的网址去访问,也可以用自己的域名去指向.

在这里,我们不走寻常路,我们不要被卡脖子!2012年到2022的历史告诉我们,卡脖子就要挨打!我们要用自己的服务器,用自己的git仓库,用自己的pages服务!

静态托管网址

这里我们用到了之前提到过的宝塔系统,已经知道如何创建网站了,可以参考链接 20220501170945 不需要数据库,数据都在本地,或者说都在git仓库 不需要php,网页都在本地生成 我们记下来站点根目录 记得在域名解析里添加网址解析

git项目仓库

这里我们用到了之前搭建好的git仓库,我们去到仓库新建blog仓库

20220501173813

一个空仓库,我们记下来仓库地址

这里我们要做一个自动化.其实就是pages服务需要做的,需要自动把推送到服务器的内容chekout到网站目录

我们去到服务器上的git仓库目录,发现我们推上去的文件长这样

20220501174851

这里面并没有直接的我们生成的html静态页面,被储存为git里的数据结构了. 我们需要用到git的钩子服务,在后处理钩子里添加我们的检出操作 注意切换用户,以及站点的git权限设置

rm -rf $站点根目录/*
chown git:git $站点根目录
su git # 切换到git用户
cd $git数据目录/gitea-repositories/用户名/仓库名/hooks/post-receive.d
touch hexo
chmod +x hex # 添加执行权限
vi hexo

hexo脚本编写如下

#!/bin/sh
btsite=站点根目录
hexorepo=hexo仓库根目录
git --work-tree=$站点根目录 --git-dir=$hexo仓库根目录 checkout -f

注意手动测试一下hexo脚本是否生效./hexo 这样,当本地推送hexo仓库后,就会自动更新到站点上了

本地文章推送

关联git仓库

修改本地_config.yml中deployment字段

deploy:
  type: git
  repo: 你的仓库路径
  branch: master

地址用http或者ssh都可以,取决于你的git登录方式

推送远程并部署

git推送依赖一个插件,先安装它

npm install hexo-deployer-git --save #安装git部署
hexo deploy #推送

现在可以访问自定义域名查看你的博客了!

绕过git直接部署

既然我们有服务器了,为啥还要借助git去推送呢,直接把网站目录设置为hexo项目的public文件夹不就好了?说干就干!

环境安装

首先服务器也需要安装hexo,课参考前面的本地环境安装

再把配置文件里的git推送去掉,再然后再宝塔里设置网站目录 20220519183556

这样就可以直接访问啦!不用推送git了

配置在线编辑

使用hexo-admin插件在线编辑.npm install hexo-admin 既然是在线编辑了,那就得是在网络上,你不能只是本地又一个服务,需要服务器支持.所以刚好用上我们的服务器

编写hexo-admin服务/etc/systemd/system/hexoadmin.service

[Unit]
Description=hexo admin
After=network.target

[Service]
ExecStart=/www/www-root/hexo-blog/startadmin.sh
Restart=on-abort

[Install]
WantedBy=multi-user.target

编写启动脚本/www/wwwroot/hexo-blog/startadmin.sh

#!/bin/bash
cd /www/wwwroot/hexo-blog
hexo recommend
hexo g
hexo s -p 4001

添加执行权限,设置开机启动

chmod +x startadmin.sh
systemctl start hexoadmin
systemctl enable hexoadmin
ps -aux | grep hexo

配置admin反向代理

20220519202759

实际上,这就有两个服务了,一个是nginx提供的博客网站浏览,领域给是hexo-admin提供的在线编辑

设置密码保护

打开yousite/admin,访问管理页面,打开setting，点击Setup authentification here输入用户名，密码，密钥，下面会自动生成配置文件，复制加在hexo根目录下的_config.yml中：

admin:
  username: myfavoritename
  password_hash: be121740bf988b2225a313fa1f107ca1
  secret: a secret something
  deployCommand: ./startadmin.sh

Next主题的使用

可以在官网上搜索主题 https://hexo.io/themes/,也可以使用npm直接安装 大名鼎鼎的next和butterflay都可以试试

安装

cd <folder> #hexo项目
npm install hexo-theme-next
git clone https://github.com/next-theme/hexo-theme-next themes/next

或者直接在线下载,解压到themes/next文件夹 然后编辑配置文件,把theme设置为next即可 重新hexo g,hexo d,即可看到效果

升级

cd theme/next #进入主题
git add . #标记修改
git stash #弹出修改
git pull #拉取更新
git stash pop #合并修改

基础设置

参考next官方文档

设置语言:编辑 站点配置文件，将 language 设置成你所需要的语言。建议明确设置你所需要的语言，例如选用简体中文，配置如下：language: zh-CN

设置菜单:菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项对应的图标。 NexT 使用的是 Font Awesome 提供的图标， Font Awesome 提供了 600+ 的图标，可以满足绝大的多数的场景，同时无须担心在 Retina 屏幕下 图标模糊的问题

设置侧栏:默认情况下，侧栏仅在文章页面（拥有目录列表）时才显示，并放置于右侧位置。 可以通过修改 主题配置文件 中的 sidebar 字段来控制侧栏的行为。侧栏的设置包括两个部分，其一是侧栏的位置， 其二是侧栏显示的时机。

统计功能

百度统计:登录百度统计,定位到站点的代码获取页面. 编辑主题配置文件，修改字段 baidu_analytics 字段，值设置成页面的百度统计脚本 id

安装工具npm install eslint --save

阅读统计:npm install hexo-symbols-count-time --save

站点配置文件添加以下设置

symbols_count_time:
  symbols: true                # 文章字数统计
  time: true                   # 文章阅读时长
  total_symbols: true          # 站点总字数统计
  total_time: true             # 站点总阅读时长
  exclude_codeblock: false     # 排除代码字数统计
  separated_meta: true     # 是否另起一行（true的话不和发表时间等同一行）
  item_text_post: true     # 首页文章统计数量前是否显示文字描述（本文字数、阅读时长）
  item_text_total: false   # 页面底部统计数量前是否显示文字描述（站点总字数、站点阅读时长）
  awl: 2                   # Average Word Length
  wpm: 275                 # Words Per Minute（每分钟阅读词数）
  suffix: mins.

设置Rss订阅

NexT 中 RSS 有三个设置选项，满足特定的使用场景。 更改 主题配置文件，设定 rss 字段的值：

  • false：禁用 RSS，不在页面上显示 RSS 连接。
  • 留空：使用 Hexo 生成的 Feed 链接。 你需要先安装 hexo-generator-feed 插件。
  • 具体的链接地址：适用于已经烧制过 Feed 的情形。

hexo配置文件增加如下

feed:
  enable: true
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  autodiscovery: true
  template: #默认模板:https://github.com/hexojs/hexo-generator-feed/blob/master/atom.xml

设置代码高亮主题

codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme:
    light: default
    dark: stackoverflow-dark
  prism:
    light: prism
    dark: prism-dark
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style: flat

搜索服务

npm install hexo-generator-searchdb --save

站点配置底部添加设置

search:
  path: search.xml
  field: post
  content: true
  format: html

next配置如下设置,打开local search

# Local Search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
  enable: false
  # 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
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

侧边栏添加电子时钟

npm i hexo-electric-clock --save

增加hexo配置

electric_clock:
  priority: 5
  enable: true
  enable_page: all
  layout:
    type: class
    name: sticky_layout
    index: 0
  temple_html: '<div class="card-widget card-clock"><div class="card-glass"><div class="card-background"><div class="card-content"><div id="hexo_electric_clock"><img id="card-clock-loading" src="https://fastly.jsdelivr.net/gh/Zfour/Butterfly-clock/clock/images/weather/loading.gif" style="height: 120px; width: 100%;" data-ll-status="loading" class="entered loading"></div></div></div></div></div>'

经试验,这样不行,不知道是不是hexo版本原因,不兼容

事实证明,是js代理服务器挂了,获取不到js代码,解决方法参考hexo页面不显示问题

Hexo写作

可以执行下列命令来创建一篇新文章。hexo new [layout] <title> 可以在命令中指定文章的布局（layout），不指定默认为 post，也可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。创建的新文章会自动加上指定布局对应的模板文件中的内容。

Front-matter

当我们创建一个md文件后，打开后会看到一些内容，这些称为Front-matter，它是文件最上方以 --- 分隔的区域，用于指定个别文件的变量，举例来说：

---
title: Hello World # 标题就是我们上面创建的时候指定的名字
date: 2013/7/13 20:46:25 # 文件创建的时间
---

Front-matter预定义参数 | layout |布局 默认为true，如果你不想你的文章被处理，可以设置为false | |-----------|-----------------------------------| | title | 标题 标题会显示在最上方居中位置 | | date | 建立日期 如果不指定则为默认值-文件创建日期，可以自定义。 | | update | 更新日期 如果不指定则为默认值-文件修改后重新生成静态文件的日期。 | | comments | 是否开启文章的评论功能 默认值为true | | tags | 标签（不适用于页面page布局） | |categoreies| 分类（不适用于页面page布局） | | keywords | 关键字 仅用于meta标签和OpenGraph不推荐使用） |

在文章的Front Matter中添加参数sticky即可实现首页置顶，数字越大排序越高（升序排序）

自动生成摘要

使用 <!-- more -->，除了可以精确控制需要显示的摘录内容以外，这种方式也可以让 Hexo 中的插件更好的识别。

more之前的内容自动成为摘要,主页会截取这一段

不要自作聪明多家一些横线------------------.

会不识别的,成为不了摘要

为文章添加分类与标签

只有文章（post布局）支持分类和标签，需要在Front-matter中设置。分类有层级关系，标签没有。

举个例子：

  1. 下面文章它的标签是：Hexo、博客
  2. 分类是： 个人博客 > Hexo博客
  3. “Hexo博客” 是 “个人博客” 的子分类

categories:
- 个人博客（第一层级）
- Hexo博客（第二层级）
tags:
- Hexo
- 博客

为文章添加多个分类

  1. 下面文章属于三个分类：日常 > 生活，日常 > 随想，日记
  2. 其中生活、随想为日常的子分类，日常和日记为同级分类

categories:
- [日常, 生活]
- [日常, 随想]
- [日记]

根据目录自动分类

下载插件实现npm install --save hexo-directory-category 修改配置文件

auto_dir_categorize:
 enable: true  # options:true, false; default is true
 force: false # options:true, false; default is false

force: 是否覆盖front-matter的分类设定

Hexo锚点链接

当前文 章 锚点跳转

使用 markdown 内置的链接方式即可，其中如果有空格，需要把空格换成连字符 - ，如下：

[跳转到本文锚点](#当前文-章-锚点跳转)

示例:跳转到"当前文 章 锚点跳转"

战内文章链接

官方有标签插件实现站内文章链接，如下：

{% post_link 网站搭建/00个人服务器从采购到配置 '跳转到站内文章' %}

示例:跳转到"个人服务器采购和配置"Post not found: 网站搭建/00个人服务器从采购到配置 跳转到站内文章

注意： 这儿使用的是文章对应的md文件相对_posts的路径！

站内其他文章锚点链接

上面的 post_link 方式链接站内文章好用，但是不支持文章的锚点链接，我们需要换一种方式。

官方文档还有一个 post_path ，用于获取文章路径，结合 markdown 内置的链接方式，即可实现锚点超链接，如下：

[跳转到文章的供应商选择]({% post_path 网站搭建/00个人服务器从采购到配置 '跳转到站内文章锚' %}#供应商选择)

示例:[跳转到文章的供应商选择](#供应商选择)

失败了,谁来告诉我原因在哪

注意

  1. 如果文章中有图片，可能会出现锚点位置不准确问题，原因是图片加载成功之后会把内容高度撑开。
  2. 如果如果有空格，需要把空格换成连字符 -。

站外文章锚点

就是普通的markdown链接,直接使用全路径即可