博客建站历程记录

2026-04-01

技术前端博客记录

本文简短记录了从零开始用原生前端+Node.js搭建博客的历程，涵盖HTML/CSS/JS实现、前后端交互、服务器部署。

前言

在我还在上高中的时候，拥有一个网站在我看来是十分难的、酷炫的、极客的。后来发现前端有框架，后端有一站式服务，有静态页面托管。

不过我还是想体验一番从零开始的搭建流程，于是找b站上的前端教程跟着走了一遍，边学边写，在Deepseek老师的帮助下勉强完成了，~~包含大量屎山~~。

需要提醒，本文仅展示路线记录和简介(和吐槽)，并不提供具体的搭建或编程教程。

想要借鉴这个项目的朋友，该项目已开源，欢迎fork。

HTML

最简单的一集。

众所周知，作为一个标记语言，HTML是网页的骨架，其结构决定了网页的基本框架。

我的网页结构采用最典型的F型布局：上方导航栏下方页脚，中间为内容区。内容区又细分为介绍边栏和文章列表。

CSS

重点其一。

现代页面美化离不开层叠样式表这个大山。想要精通CSS还是很有难度的，不过浅学习一下用来做小项目已经足够了。

前文所描述的布局可以使用CSS里的float实现，为了实现响应式，我在大板块之间使用flex布局，剩下的细枝末节则看情况随机应变。

/* 内容区 */
.main {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

内容区全部卡片式设计，美观的同时还能提高代码复用率。

响应式布局使用媒体查询实现，这样一个页面同时兼顾PC端和移动端。读者如果使用PC浏览器观看，可以缩小浏览器窗口来测试。

/* 媒体查询其一 */
@media screen and (max-width:1600px) {
    .sidebar {
        display: none;
    }

    #searchInput {
        display: none;
    }

    .list {
        display: inline-block;
    }

    .modal-content {
        height: 50vh;
        width: 60vw;
        margin: -25vh 0 0 -30vw;
    }

    .modalHtml {
        height: 30vh;
    }
}

将主页的主要布局和样式写好之后，直接复制到各个页面里，只进行小修改以适配，避免更多的重复敲键盘。每个页面再单独设计一个CSS文件来实现不同的效果。

文章的美化方面采用github-markdown-css和highlight库。~~不过好像有点bug~~

JavaScript

重点其二。

学过其他的语言再来看js会发现js的语法真挺简单，并且如其名，带有很多Java的特色。

实现这个项目并没有使用多么高级的js技巧，主要是BOM和DOM操作。没有接触框架的我感觉DOM操作也没有网上很多人说的那么麻烦。

/* 这里列举了PC端导航栏的自动缩回功能 */
const navColor = document.querySelector('.nav-color')
const navColorCover = document.querySelector('.nav-color-cover')

navColor.classList.add('navShow')

window.addEventListener('scroll', function () {
    if (window.innerWidth > 1300) {
        const y = this.document.documentElement.scrollTop

        if (y <= 800) {
            navColor.classList.add('navShow')
            navColorCover.classList.add('navCoverHidden')
        } else {
            navColorCover.classList.remove('navCoverHidden')
            navColor.classList.remove('navShow')
        }
    }
})

前后端交互和Node.js

仅仅做一个静态页面当然满足不了我的需求。我将主要页面渲染放在前端，后端使用Node.js进行数据返回。

要说网络请求，就绕不开XHR或者Fetch，我这里使用前者的封装库：Axios。

// 基本使用方法
axios({
    url: '/api/abc'
}).then(result => {
    // ···
})

前端获取数据后，处理完毕便直接渲染在页面上。主要请求包括获取文章列表，提交搜索词等。

后端运行一个server.js来处理前端提交的请求。为了区别图像、网页、api等请求，在内部使用字符串处理，并返回对应的数据。

这里可以说是最花时间的部分，也是请教D老师最频繁的部分，~~也是屎山最多的部分~~。设计什么样的数据格式，怎么返回数据，如何处理，都是D老师教的，AI还是太便利了.jpg。

文章格式

博客使用Markdown编写文章，并在处理后在前端渲染为HTML。这依靠markdown-it.js和highlight.js两个库。

随笔使用txt格式保存。

每次更新文章后，运行一个update.js来更新一个json文件。这个json文件用于提交给前端渲染文章列表、文章简介和随笔列表。

// 部分JSON
{
  "posts": [
    {
      "type": "article",
      "name": "a1",
      "title": "博客建站历程",
      "date": "2026-04-01 00:00:00",
      "categories": [
        "技术"
      ],
      "tags": [
        "前端",
        "博客",
        "记录"
      ],
      "excerpt": "本文简短记录了我从零开始，使用原生前端开发并建立博客的路程。"
    }
    // ···
  ]
}

本地的代码基本上已经完成了，接下来就是把东西全部搬到服务器上运行。

服务器，域名和nginx配置

一开始我还在为项目即将上线而欣喜，等到我鼓捣服务器整整两天过后，只想对两天前的我说“喂前面可是地狱啊”。

“国内的网站当然要用国内的服务器”怀着守序善良的观点，我购买了境内某地服务器，然后兴冲冲访问IP的时候，“您的域名尚未添加至白名单导致无法访问”直接糊我脸上。

查找半天方法，好吧要我先给网站备案。幸好雨云的服务器可以七天无理由退款，于是我退款买了另一个中国香港的服务器。

把项目全部放在服务器上后，配置nginx才是噩梦。因为我的博客是Node.js全栈，后端在本地测试时跑的是localhost，这直接导致我不管怎么配置，请求就是没法正确转发。

最后搞得我恼火，把宝塔面板给卸载了，使用Ubuntu和远程链接，D老师和豆老师轮番上阵才跑通。

后记

本来只是想有一个可以记录自己学习路程的地方，思来想去还是决定搞一个博客看看，没想到最终还是让我做出来了。这篇文章也是学习路程的一部分，作为博客的第一篇还挺合适。

如读者所见，这个博客还很简陋，不过作为发布文章的地方已经足够了，以后我会慢慢修补。