服务器搭建

写篇文章记录一下配置服务器踩的坑，作为今后的参考。

搭建服务器

选购服务器

我用的是腾讯云服务器，关于选哪个服务商的服务器个人觉得腾讯和阿里都是可以的。在腾讯买的话最好是看看有什么优惠活动，一般学生第一次买是有很大的优惠的。服务器资源配置的话看自己需要，像搭个小网站的话2G内存完全足够了。

买好之后需要选一个系统，我直接选的是腾讯云和宝塔共同推出的宝塔Linux面板，用这个话可以方便的用宝塔面板安装软件、配置什么的，这个系统本质上也是CentOS，其他系统比如Ubuntu、CentOS也都可以选，最好是选Linux系统，它比Windows系统占用内存小。一切做好后开机，设置密码什么的就一笔带过了。

域名配置

既然服务器都是在腾讯买的干脆域名也一起买了，比较麻烦的就是填资料，也没什么要说的。买好之后要配置DNS解析，进入解析页面后直接快速添加解析，跟着指引走就可以了，很简单。

顺便一提域名是需要备案的，需要首先在腾讯云上进行ICP备案（工信部备案），完成之后的30天内需要进行公安备案，具体流程腾讯云都有文档指引，ICP 备案 首次备案-网站备案-文档中心-腾讯云 (tencent.com)。

软件下载

下载必要的软件，如MySQL、tomcat等，做好基本配置，确保MySQL能在本地用Navicat访问，能够通过ip地址访问tomcat欢迎页。

安全配置

修改ssh端口

每次登进服务器都会有大量ssh登录失败，于是觉得修改一下ssh的端口会比较好，具体参考这一篇：修改ssh默认端口-腾讯云开发者社区-腾讯云 (tencent.com)。

配置SSL

配置了这一步就可以将http替换为https了。首先在SSL证书页面申请一个免费的SSL证书，SSL 证书 免费 SSL 证书申请流程-证书申请-文档中心-腾讯云 (tencent.com)。然后在tomcat中安装证书就可以了，SSL 证书 Tomcat 服务器 SSL 证书安装部署（JKS 格式）（Linux）-证书安装-文档中心-腾讯云 (tencent.com)，把文档最后http自动跳转到https也配置上。Tomcat10配置SSL参考：Tomcat10 HTTPS配置避雷。

速度优化

可以通过gzip将一些文本文件压缩，减少传输的数据量，从而加快网页加载。图片文件已经压缩过了无需再通过gzip压缩，个人试过压缩图片发现大小反而变大了，所以最好是使用小一点的图片。看这篇配置就行：tomcat设置gzip压缩的原理及配置方法-腾讯云开发者社区-腾讯云 (tencent.com)。

配置之后发现稍微大一点的js无法压缩，查阅资料后发现tomcat超过48k的文件就不会使用gzip压缩，解决方法：Tomcat GZIP压缩的坑：有的有效有的无效_tomcat gzip 无效-CSDN博客。

完整的配置：

<Connector
	compression="on"
	compressionMinSize="2048"
	useSendfile="false"
	noCompressionUserAgents="gozilla, traviata"
	compressableMimeType="text/html,text/xml,application/javascript,text/javascript,text/css,text/plain,application/json"
/>

为了压缩md文件，可以修改/tomcat/conf/web.xml文件，插入如下代码

<mime-mapping>
    <extension>md</extension>
    <mime-type>text/plain</mime-type>
</mime-mapping>

即可将md作为纯文本，从而被刚才配置的gzip压缩。

Nginx

将客户端通过服务器80或443端口的访问反向代理到内部服务的端口（如8080），这样客户端就无需输入端口号。

SSL/TLS配置

配置参考：SSL 证书 Nginx 服务器 SSL 证书安装部署（Linux）-证书安装-文档中心-腾讯云 (tencent.com)。

proxy_set_header的解释参考：nginx中proxy_set_header Host的作用。

server
{
    listen 443 ssl;
    # 客户端访问的地址
    server_name shuusui.site;

    # 证书文件（相对或绝对路径）
    ssl_certificate /xxx/shuusui.site.crt;
    # 私钥文件（相对或绝对路径）
    ssl_certificate_key /xxx/shuusui.site.key;
	# 超时时间
    ssl_session_timeout 5m;

    # 具体协议
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; 
    ssl_prefer_server_ciphers on;

    location / {
        # 反向代理到的服务器端口，如此处代理到8080端口（tomcat），因为就在本机所以直接写localhost
        proxy_pass  http://localhost:8080;
        # 简单来说因为经过了nginx，后端服务器接受到的请求就是nginx转发来的，请求中的一些字段被nginx改了，导致服务器拿不到真正客户端的某些字段，因此这里重新赋值一下。参考链接上面给了。
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    access_log  /www/wwwlogs/access.log;
}

自动跳转443端口

server
{
    listen 80;
    server_name shuusui.site xxx.shuusui.site;

    return 301 https://$host$request_uri;
}

Hexo

Hexo文档：文档 | Hexo

Fluid主题配置文档：Hexo Fluid 用户手册 (fluid-dev.github.io)

首页文章置顶

文章页的front-matter中加上：

sticky: 1

值越大越靠前。参考：hexojs/hexo-generator-index: Index generator plugin for Hexo。

首页文章按更新日期排序

确保每篇文章的front-matter中都有updated字段。修改_config.yml如下：

index_generator:
    path: ''
    per_page: 10
    order_by: -updated

同样参考：hexojs/hexo-generator-index: Index generator plugin for Hexo。

首页文章封面显示更新日期

修改主题配置文件对应配置项：

post_meta:
    updated: true	# 要添加的，确保下面的代码能找到变量
    date: true
    category: true
    tag: true

在\themes\fluid\layout\index.ejs文件中，找到

<div class="index-btm post-metas">

仿照其中的写法创建一条：

<% if (theme.index.post_meta.updated) { %>
    <div class="post-meta mr-3">
        <i class="iconfont icon-date"></i>
        <time datetime="<%= full_date(post.updated, 'YYYY-MM-DD HH:mm') %>" pubdate>
            <%- date(post.updated, config.date_format) %>
        </time>
    </div>
<% } %>

文章页顶部显示更新日期

修改主题配置文件对应配置项：

post:
    meta:
        date:
            enable: true
            format: "LL"
        # 下面是要添加的
        updated:
            enable: true
            format: "LL"

在\themes\fluid\layout\_partials\post\meta-top.ejs文件的相应位置仿照日期的写法创建一条：

<% if (theme.post.meta.updated.enable) { %>
    <span class="post-meta">
        <i class="iconfont icon-date-fill" aria-hidden="true"></i>
        <time datetime="<%= full_date(page.updated, 'YYYY-MM-DD HH:mm') %>" pubdate>
            <%= full_date(page.updated, theme.post.meta.updated.format) %>
        </time>
    </span>
<% } %>

自定义图标

参考图标 | Hexo Fluid 用户手册，用自定义CSS引入的方式。

Overleaf

官网：GitHub - overleaf/overleaf: A web-based collaborative LaTeX editor。

教程：toolkit/doc/quick-start-guide.md。

sharelatex镜像：docker.io/sharelatex/sharelatex，按下面的命令配置，记得docker tag。

其他文档：

• 配置、命令说明：toolkit/doc/configuration.md，对overleaf.rc或variables.env做任何修改后都应该删除容器然后重新搭建；
• 配置文件：toolkit/doc/overleaf-rc.md；
• 下载latex的全部包：toolkit/doc/ce-upgrading-texlive.md。

docsify

现已改用hexo

官网：docsify

主要是对index.html的配置，建议将所有用到的css、js资源下载到本地然后链接，否则获取有些js文件需要访问外网。

配置项

我使用的所有插件均能在官网找到，对应的js文件官网均给出了链接，因此直接给出配置项：

window.$docsify = {
    name: 'xxx',

    // 侧边栏
    loadSidebar: true,
    alias: {
        '/.*/_sidebar.md': '/_sidebar.md',
    },
    subMaxLevel: 5,
    sidebarDisplayLevel: 1,

    // 404页面
    notFoundPage: true,

    // 切换页面后自动跳转到页面顶部
    auto2top: true,

    // 底部导航
    pagination: {
        previousText: '上一章',
        nextText: '下一章',
        crossChapter: true,
        crossChapterText: true,
    },

    // 全文搜索
    search: {
        depth: 6,
        noData: "找不到结果!",
        placeholder: "搜索...",
        namespace: "website-1",
    },

    // 复制代码
    copyCode: {
        buttonText: '复制',
        successText: '复制成功',
        errorText: '复制错误',
    },

    // 字数统计
    count: {
        countable: true,
        position: 'top',
        margin: '10px',
        float: 'right',
        fontsize: '0.9em',
        color: 'rgb(90,90,90)',
        language: 'chinese',
        isExpected: false
    }
}

需要引入的js：

<!-- 主题 -->
<link href="./static/vue.css" rel="stylesheet" />

<!-- 侧边栏目录 箭头样式 -->
<link href="./static/sidebar.min.css" rel="stylesheet" />

<!-- Docsify v4 -->
<script src="./static/docsify.min.js"></script>

<!-- 侧边栏目录 折叠 -->
<script src="./static/docsify-sidebar-collapse.min.js"></script>

<!-- 底部导航 -->
<script src="./static/docsify-pagination.min.js"></script>

<!-- 全文搜索 -->
<script src="./static/search.min.js"></script>

<!-- 复制到剪贴板 -->
<script src="./static/docsify-copy-code.min.js"></script>

<!-- 图片放大 -->
<script src="./static/zoom-image.min.js"></script>

<!-- 字数统计 -->
<script src="./static/countable.min.js"></script>

<!-- 公式 -->
<link rel="stylesheet" href="./static/katex.min.css" />
<script src="./static/katex.min.js"></script>
<script src="./static/marked@4.js"></script>
<script src="./static/docsify-katex.js"></script>

<!-- 代码高亮 -->
<script src="./static/prism-bash.min.js"></script>
<script src="./static/prism-c.min.js"></script>
<script src="./static/prism-cpp.min.js"></script>
<script src="./static/prism-java.min.js"></script>
<script src="./static/prism-sql.min.js"></script>
<script src="./static/prism-cmake.min.js"></script>
<script src="./static/prism-python.min.js"></script>

侧边栏

侧边栏配置文件_sidebar.md形如：

- [首页](/)
- **系统的笔记**
    - [C算法与函数](/sys/c/)
    - [Java](/sys/java/)
    - [JavaScript](/sys/js/)
    - [MySQL](/sys/mysql/)
    - [Linux](/sys/linux/)
    - [HTML](/sys/html/)
- **零散的笔记**
    - [CMake](/odd/cmake/)
    - [gcc](/odd/gcc/)
    - [git](/odd/git/)