如何免费host一个网站，就像这个网站

我希望这可以是一个对普通人和程序员都有趣的帖子！

对于普通人，你知道其实有一个网站可以这么便宜吗，我这个网站就是域名的费用，其他的没了！在AWS一个ca域名就14刀每年，route 53还需要0.51一个月。所以实际上拥有简单的博客类，或者信息类网站的话就需要20多刀每年！假如你是小business，那么你完全可以让设计师一次性设计好网站，然后雇一个程序员按照这样方式部署一个网站，从而以最低的价格拥有你的business网站。

对于程序员，这个网站的后台是expressjs server，内容保存在markdown文档并且也保存在git，marked把markdown文档转换为html，ejs渲染网页，部署在Vercel free tier。相信我这么一说你肯定一下就懂了！我甚至没有bother typescript，因为实在是太简单了哈哈。其他一些不是那么重要的技术细节：pico css，因为我希望尽量lightweight。网页端除了Google analytics，没有其他js了！这点我非常自豪，希望这个网站可以保持不用js，不过以后如果我想部署一些有趣的网页恐怕还是需要js。

app.get('/*path', function (req, res, next) { //主页我手搓的html，所以就不分享了哈！
    const pathname = req.params.path.join('/')
    try {
        if (!/^[\w\-\/]+$/.test(pathname)) return next(); // only alphanumeric, dash, underscore, slash
        const filePath = path.join(__dirname, `pages/${pathname}.md`);
        const fileContent = readFileSync(filePath, 'utf-8');
        const [data, content] = fileContent.split("******") // 我用 "******" 来分隔网页的meta data和内容
        const parsedData = JSON.parse(data)
        parsedData.canonical = `https://${req.headers.host}/${pathname}`
        const date = `<small>${req.params.path[1].split("_")[0]}</small><hr />`
        res.render('index', { data: parsedData, body: date + marked.parse(content) });

    } catch (error) {
        if (error.code == "ENOENT")
            return next()
        throw error
    }
});

关于vercel部署有个小坑你也许可以避免，就是static asset记得放到public folder，这样部署后vercel可以找到文件，我一开始是放在asset里，导致css文件404. 可能vercel会移除某些特定文件夹，比如asset。在本地测试的时候，static文件会被expressjs serve，部署后则会被vercel直接serve。我猜测如果你用一个奇特文件夹名字可能也行，比如website-asset，部署后可能会被vercel保留，最后则是expressjs直接serve的。

app.use(express.static('public'))

关于SEO, 记得用semantic HTML！pico css的一些例子其实就挺好！别忘了OG image, robots.txt, sitemap. sitemap应该可以用ejs来渲染，不过我是手搓的xml的哈哈。看着有点丑，就不分享了哈哈。That's it!