如何建立本站

发表于 更新于 分类于

简介

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

本文以hexo_test为工作目录

hexo框架

参考官网链接

安装

1
2
3
4
#curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
curl -sL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo npm install -g hexo-cli

测试

生成hexo默认的blog页面
cd hexo_test
hexo init myblog
cd myblog
npm install
这一步会出现下面的warn，这是warning，是因为mac下需要 fsevents，在windows或linux环境下，请忽略这个错误。
warn
hexo clean
hexo g
如果是在本地安装，打开浏览器，输入 http://localhost:4000 即可查看页面
hexo s # default port is 4000
sudo hexo s -p 80 # specify port is 80

配置

  1. 基础配置
    无法显示图片改这个
    url: http://chasentech.com/blog2

  2. 博客插入图片
    参考链接

  3. 博客文章加密

配置next主题

选择了好几个主题之后，感觉next简洁明了

部署

cd hexo_test

1
2
# 8.3.0会报错
err: Error: ENOENT: no such file or directory, open '/home/zcl_aly/hexo_blog/blogzfc/node_modules/highlight.js/styles/tomorrow-night.css'

git clone --branch v8.18.0 https://github.com/next-theme/hexo-theme-next themes/next
vim _config.yml # 修改主题为next
theme-next
hexo c && hexo g

配置

配置文件

扩展

配置参考教程
33个配置技巧
next首页自定义
链接样式修改
next自定义修改

  1. 添加page topic
    ……

  2. 自定义主页
    参考 链接
    a. source目录下，新建一个index.md文档
    b. 根目录下的_config.yml文件的index_generator下面的path项，改为一个无效值，
    eg.
    index_generator:
    path: ‘’

index_generator:
path: ‘/default-index’
c. 修改NexT主题的配置文件（themes/next/_config.yml文件）的Home菜单指向的链接也就是打开home标签
把#home: / || fa fa-home
改为home: / || fa fa-home

  1. 访客统计

打开\themes\next\layout_partials\footer.swig文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
......
{%- endif %}

add start
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
  本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>
add end

<div class="copyright">
......

在这里有两中不同计算方式的统计代码：

  • pv的方式，单个用户连续点击n篇文章，记录n次访问量
  • uv的方式，单个用户连续点击n篇文章，只记录1次访客数

  1. 网站底部加备案号？？

  2. 文章加密访问有新方式？

https://zhuanlan.zhihu.com/p/31877891

打开themes->next->layout->_partials->head.swig文件,在以下位置插入这样一段代码：
(blog/themes/next/layout/_partials/head/head-unique.njk)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    (function () {
        if ('{{ page.password }}') {
            if (prompt('请输入文章密码') !== '{{ page.password }}') {
                alert('密码错误！');
                if (history.length === 1) {
                    location.replace("http://xxxxxxx.xxx"); // 这里替换成你的首页
                } else {
                    history.back();
                }
            }
        }
    })();
</script>

然后在文章上写成类似这样：
password: xxxxx
abstract: xxxxx
message: 输入密码，查看文章

  1. 超链接颜色更改
    360急速浏览器不支持，edge浏览器才行，搞了半天
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    # /themes/next/source/css/_common/components/post/post-body.styl
    ......
          width: 100%;
        }
      }
      a:not(.btn) {
        color: #0477ab;
        border-bottom: none;
        &:hover {
          color: #0477ab;
          text-decoration: underline;
        }
      }
    }

如何发布文章

1
2
3
4
5
cd hexo_test
hexo new "2022-02-12-如何建立本站" # 即可生成./source/_postsname.md
# edit ./source/_posts/2022-02-12-如何建立本站，标题的时间去掉

hexo clean && hexo g # 即可在网页端预览