记录一次博客建站过程，基于云服务器、1Panel和typecho，最快10分钟完成！ 本站按照下述步骤构建，你可以直接访问 本站https://techaiwave.com 查看效果。1、要搭建一个网站，首先要了解一个网站由哪些部分组成。以百度 baidu.com 为例，我们在访问百度的时候一般都是访问的baidu.com这个域名，在浏览器输入这个域名之后会自动请求 DNS服务器 返回百度的服务器IP地址（也可能是CDN地址，这里我们暂不关注），之后浏览器和服务器IP交互，生成用户看到的界面。看到这里，一个完整的web服务至少有以下这些要素：域名（个人玩玩的话也可以直接访问服务器的 IP:端口）服务器，并且有 公网IP （公网可直接访问的）有了这些我们就具备了搭建网站的硬件条件，接下来是网站的具体界面。如上面这个，完成这样一个界面的搭建一般有两种途径：一是编写程序代码（前端 html、css、javascript，后端如php、java、go 等）；二是使用现成的建站框架，如wordpress、eblog、typecho等等（本质上是程对序代码的抽象封装，让我们点一点就能快速完成网页搭建）。因此我们能够梳理出一个快速的建站路径： ① 注册域名 ② 购买云服务器 ③ 网站搭建（服务器系统安装、基础组件配置、网站框架部署） ④ 网站主题安装和调试2、注册域名我们使用腾讯云来演示，当然也可以选择其他的域名注册平台。打开这个界面选择一个你心仪的域名 https://buy.cloud.tencent.com/domain ，选择一个最便宜的即可。添加购物车后选择立即购买，如果你没有注册过的话，会要求填写信息模板（可能会1-2天审核）。3、购买云服务器同样使用腾讯云，如果你是个人测试或者新手，建议使用 腾讯云轻量应用服务器 ，选择 基于操作系统镜像、ubuntu系统、香港区域（中国大陆境外服务器免备案）、性能2C2G、自定义密码...。购买完成后就可以在控制台界面管理访问了，或者通过ssh工具远程登录进行配置。4、网站搭建4.1 安装 Linux 管理工具 1Panel我们先安装一个 1Panel 方便管理 Linux 服务器，可以使用ssh工具连接上服务器（如MobaXterm），如果你不熟悉或者没有使用过的话，也可以在腾讯云控制台-轻量应用服务器-服务器 里直接登录。登录后在控制台执行安装命令，也可以在官网 1Panel 获取：curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && sudo bash quick_start.sh按照提示安装完成并记录安装程序提供的访问链接、账户、密码，注意在腾讯云轻量服务器防火墙放通访问端口，之后就可以在浏览器输入链接直接访问了。4.2 基于 1Panel 安装web服务器 nginx这里我们直接安装 1Panel 商店里提供的 OpenResty。OpenResty 是一个基于 Nginx 的高性能 Web 应用服务器，它将 Nginx 与 Lua 编程语言集成在一起，提供了强大的功能和灵活性。4.3 创建 php运行环境 和网站接下来创建typecho的php运行环境：创建出web网站：这时我们把域名解析到服务器IP上后，就可以直接访问到界面了。看到这个界面说明我们web服务已经成功启动。4.4 部署 typecho 程序要部署typecho，只需要把typecho的源代码放到我们启动的web程序目录内。你可以到 typecho官网 去下载，也可以点击 下载链接 直接下载。这里我们使用1Panel提供的远程下载，直接将源代码下载到网站位置。打开后，进入index文件夹下。远程下载并解压文件到index目录下，这样程序就部署好了。解压后效果如下：4.5开始访问我们这时候访问就可以看到typecho的欢迎界面了。快速开始我们直接选择sqlite数据库（同样的环境，实测比mysql访问响应要快20-50ms，也可能是因为测试时候数据量较少的原因）。继续按照提示输入账户、密码、邮箱，完成安装。访问可以看到效果了：5、Joe主题安装和调试原生的typecho具备完整的后台管理和前端展示，可以满足建站、博客等基本要求。有时候我们还想更好看和更多个性化功能，就需要来主题装饰界面。你可以在一些主题网站里找到你想要的风格，如 https://www.61os.com 。这里我们使用Joe主题。主题作者：https://78.alGithub：https://github.com/HaoOuBa/Joe5.1 Joe主题安装下载后上传到 index/usr/themes目录内，注意解压。然后再登录typecho的后台管理界面控制台-外观-网站外观启用主题。5.2 主题优化可以参考本站的这篇文章： typecho joe主题优化6、访问优化6.1 ssl证书配置这里我们基于 1Panel 申请免费的泛域名证书　Acme账户：用于申请免费证书　DNS账户：用于对接DNS服务商，做证书申请过程中自动化的DNS解析校验首先配置DNS账户，选择腾讯云，账户密钥在这里获取：https://console.cloud.tencent.com/cam/capi。然后创建Acme账户，无需注册，填写任意邮箱、选择账户类型和算法。完成后就可以直接申请免费的泛域名证书了，1Panel会自动帮你续签。最后我们在网站配置里面启用https，选择申请的证书完成配置。6.2 CDN加速{ } 待办

typecho joe主题优化 1、去除首页前台登录按钮，登陆时显示登录状态，不登录则不显示修改效果修改方法打开这个文件：/themes/Joe/public/header.php注释掉下面这段代码即可：2、增加文章目录参考：https://cloud.tencent.com.cn/developer/article/2011100修改效果自动创建文章目录，支持显示H1-H3共3级标题，标题和目录可以联动：修改方法1、在文件 /usr/themes/Joe/public/aside.php 的合适位置增加如下代码，用于在侧边栏创建目录容器<?php if ($this->is('post') || $this->is('page')) : ?> <section class="joe_aside__item catalogue"> <div class="joe_aside__item-title"> <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2084" width="18" height="18"><path d="M640 192H224c-17.7 0-32-14.3-32-32s14.3-32 32-32h416c17.7 0 32 14.3 32 32s-14.3 32-32 32zM960 544H224c-17.7 0-32-14.3-32-32s14.3-32 32-32h736c17.7 0 32 14.3 32 32s-14.3 32-32 32zM640 896H224c-17.7 0-32-14.3-32-32s14.3-32 32-32h416c17.7 0 32 14.3 32 32s-14.3 32-32 32zM96 192H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32zM96 544H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32zM96 896H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32z" p-id="2085"></path></svg> <span class="text">目录</span> <span class="line"></span> </div> <div class="joe_aside__item-contain"> <ul class="catalogue-items"> </ul> </div> </section> <?php endif; ?>2、在Joe主题的设置（ 控制台->外观->设置外观->全局设置->自定义js ）中添加JS代码function get_catalogs(article_content) { const titleTag = ["H1", "H2", "H3"]; let titles = []; article_content.childNodes.forEach((e, index) => { const id = "header-" + index; if(titleTag.includes(e.nodeName)){ titles.push({ id: id, text: e.textContent, level: Number(e.nodeName.substring(1, 2)) }); e.setAttribute("id", id); } }); return titles; } // 找到目录容器 article_content = document.querySelector('.joe_detail__article'); if (article_content) { var catalog = get_catalogs(article_content); if (catalog.length == 0) { // 无目录，隐藏 $('.catalogue').hide(); } else { let catalogue = ''; for (let i = 0; i < catalog.length; i++) { let node = '<li class="catalogue-item"><a href="javascript:;" id="to-' + catalog[i].id + '" to="' + catalog[i].id + '" title="' + catalog[i].text + '">' + catalog[i].text + '</a>'; if (i == catalog.length - 1) { catalogue += node + '</li>' } else { if (catalog[i + 1].level == catalog[i].level) { catalogue += node + '</li>'; } else if (catalog[i + 1].level > catalog[i].level) { catalogue += (catalog[i + 1].level > 1) ? node + '<ul class="level-' + catalog[i + 1].level + '">' : node + '</li>'; } else { if (catalog[i + 1].level - catalog[i].level == -2) { catalogue += i > 1 ? node + '</li></ul></li></ul></li>' : node + '</li></ul></li>'; } else { catalogue += i > 1 ? node + '</li></ul></li>' : node + '</li>'; } } } } document.querySelector('.catalogue-items').innerHTML = catalogue; $('.catalogue-item > a').on('mouseenter', function () { $(this).parent().addClass('_active'); }); $('.catalogue-item > a').on('mouseleave', function () { $(this).parent().removeClass('_active'); }); // 根据目录定位到标题 $('.catalogue-item > a').on('click', function () { document.removeEventListener("scroll", autoActive); $('.catalogue-item').removeClass('active'); $(this).parent().addClass('active'); let aim = document.querySelector('#' + $(this).attr('to')); let aim_top = aim.offsetTop; let aim_h = aim.clientHeight; let above_h = document.querySelector('.joe_header__above').clientHeight; let below_h = document.querySelector('.joe_header__below').clientHeight; let offset = 0; let case1 = !document.querySelector('.joe_header__above').className.includes('active'); let case2 = document.getElementsByTagName("html")[0].scrollTop + above_h > aim_top; if (case1 && case2) { offset = above_h; } window.scrollTo({ top: aim_top - offset - below_h - 10, behavior: 'smooth' }); setTimeout(() => { document.addEventListener("scroll", autoActive); }, 500); }); if (catalog.length) $('.catalogue-item').eq(0).addClass('active'); // 目录侧标题自动定位 let autoActive = function () { let html_top = document.getElementsByTagName("html")[0].scrollTop; //获得父级卷去的高度 for (let i = 0; i < catalog.length; i++) { let offset = 0; let h_id = '#' + catalog[i].id; let h_offset = document.querySelector(h_id).offsetTop; let above_h = document.querySelector('.joe_header__above').clientHeight; let below_h = document.querySelector('.joe_header__below').clientHeight; if (!document.querySelector('.joe_header').className.includes('active')) offset = above_h; if (h_offset + below_h + offset + 10 >= html_top) { $('.catalogue-item').removeClass('active'); if (i > 0 && i < catalog.length - 1 && document.querySelector('#' + catalog[i].id).offsetTop > html_top + window.innerHeight * 0.2) { //还没到下一个标题 i--; } $('#to-' + catalog[i].id).parent().addClass('active'); break; } } }; document.addEventListener("scroll", autoActive); } } else { // 不是文章，隐藏目录 $('.catalogue').hide(); }3、在Joe主题的设置（控制台->外观->设置外观->全局设置->自定义css）中添加CSS代码.joe_aside__item.catalogue { z-index: 999; position: sticky; top: 45px; margin-bottom: 15px; transition: top 0.35s; background: var(--background) } .joe_aside__item.catalogue .joe_aside__item-contain { padding: 0; margin: 0; margin-left: 10px } .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items { border-left: 1px solid var(--classC); border-bottom: 1px solid var(--background); padding: 15px } .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item { margin: 0; padding: 0; line-height: 26px; font-size: 16px } .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item a { position: relative; display: block; line-height: 26px; color: var(--main); transition: color 0.5s } .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item a: hover { color: var(--theme) } .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item._active>a, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item.active>a { color: var(--theme) } .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item._active>a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item.active>a::before { content: ""; position: absolute; left: -17px; top: 0; width: 2px; height: 26px; background-color: var(--theme); transition: height 0.35s } .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2.catalogue-item, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item { font-size: 14px } .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item._active>a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item.active>a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item._active>a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item.active>a::before { left: -34px } .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item .level-3 .catalogue-item, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item .level-3 .catalogue-item { font-size: 12px } .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item .level-3 .catalogue-item._active>a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-2 .catalogue-item .level-3 .catalogue-item.active>a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item .level-3 .catalogue-item._active>a::before, .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item .level-3 .catalogue-item.active>a::before { left: -51px } .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item .level-3 .catalogue-item { font-size: 12px } .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items .catalogue-item ul { padding-left: 17px } .joe_aside__item.catalogue .joe_aside__item-contain .catalogue-items ul { display: block; list-style-type: disc }如有侵权，请联系 techaiwave.com@163.com 删除。

这是一个测试 你好，世界！二级标题三级标题第二个二级标题