Blog开发踩坑

阅读数: 次 2023-07-13

字数统计: 2.8k字 | 阅读时长: 10分

简单讲讲个人Blog的踩坑经历~

develop

在搭建这个Blog之前，我对网页啊前端啊什么的可以说一点不懂（虽然现在也是），也就只能简单了解了一下几个搭建个人网站的思路，再从稍微聊一聊自己在搭建的时候遇到的哪些坑+解决方法。

首先先介绍一下，网站其实可以被分为两大类：静态网站和动态网站。

静态网站：在静态网站中，网页由服务器返回，这些网页是使用简单语言（如HTML，CSS或JavaScript）构建的预构建源代码文件。静态网站中没有处理服务器上的内容（根据用户）。网页由服务器返回，没有变化，因此，静态网站速度很快。没有与数据库的交互。此外，它们的成本较低，因为主机不需要支持使用不同语言的服务器端处理。

Tips：静态并不意味着它不会响应用户操作，这些网站被称为静态，因为这些网站无法在服务器上操作或与数据库交互（动态网站就是这种情况）。

动态网站：在动态网站中，网页由服务器返回，这些网页在运行时进行处理，这意味着它们不是预构建的网页，而是在运行时根据用户的需求在服务器端脚本语言（如PHP，Node.js）等服务器支持的帮助下构建的。因此，它们比静态网站慢，但可以更新和与数据库交互。

动态网站用于静态网站，因为与静态网站（需要更改每个页面）相比，更新可以非常容易地完成，但在动态网站中，可以执行一次常见更改，它将反映在所有网页中。

——来自知乎《静态与动态网站有什么区别？》

简单来说就是，除了部分域名或者自己加的一些服务之外，静态网站可以几乎不花钱（划重点.jpg），也不用担心服务器挂了或者被攻击（个人且小规模的也不大会有人看上吧，找都找不到hhh）。像是Hexo，Hugo，VuePress 等。当然，缺点就是没有后端啥的，想要就必须自己找点插件加进去，适合没钱愿意折腾或者想学网页开发等待相关方面的。如果不太想折腾/想要更丰富的功能/担心bug/愿意承担一定费用，我还是更推荐动态网站，特别是Wordpress，截至2019年10月的统计，全球所有网站中，有超过34.7%的网站采用WordPress方式搭建，大多数bug都有人踩过坑，生态丰富，功能也多。当然也可以考虑别的，像是Halo，Typecho这些都各有其优点，在这里就不详细介绍了，详情可以参考大佬的文章《Hexo还是Hugo？Typecho还是Wordpress？读完这篇或许你就有答案了！》。

毕竟是第一次做网站，没有什么经验也不想弄出太多开销（其实就是穷），我稍微研究了下，还是准备从静态网站出发先练练手来。

我选择的方案是Hexo框架+Github文件托管+Netlify建站+ClouldFlare加速，其实相关的文章已经很多很多了，个人推荐这篇《个人博客搭建教程》内附B站解说视频，讲得很好，我一个小白也能听懂，过程也比较详细。接下来就简单说说我自己搭建的过程。我用的是win10所以下面就只说win系统的（其他的我也不懂还是找找大佬的吧）。

环境配置

首先需要先准备好node.js和git，根据系统选择即可。安装完后在CMD中输入：

1 2	node -v # 查看node版本信息 npm -v # 查看npm版本信息

能看到版本信息，就说明环境配置就已经完成了。

Tips：npm默认的官网源可能会比较慢，如果想要后续的下载速度快一些，可以通过下面的方式将源设置为淘宝源。

1
2
3

npm config get registry # 查看原来的源
npm config set registry https://registry.npm.taobao.org # 修改为淘宝源
npm config get registry # 查看现在的源

Hexo安装

环境配完了就可以安装Hexo框架了。只需要输入：

1	npm install hexo-cli -g # 全局安装hexo命令行工具

其中-g参数表示全局安装，没有这个参数就只在当前目录下安装，建议全局安装。

Hexo初始化

1	hexo init "你的博客目录名称" # 目录名称不含空格的时候双引号可以省略

Tips：建议提前选好文件夹，运行默认的CMD生成的文件是在C盘用户下的，虽然占的空间也不多但是还是要注意下~

等待一会儿，如果出现了INFO Start blogging with Hexo!就说明成功了！

然后进入博客目录，安装博客需要的其他支持：

1	npm install # 安装的依赖项在package.json文件的dependencies字段中可以看到

然后可以打开博客的文件夹，可以看到有以下几个部分的文件：

<li><code>_config.yml</code>
    <ul><li>为全局配置文件，网站的很多信息都在这里配置，比如说网站名称，副标题，描述，作者，语言，主题等等。具体可以参考官方文档：<a href="https://hexo.io/zh-cn/docs/configuration.html">https://hexo.io/zh-cn/docs/configuration.html</a>。
        </li></ul>
</li>
<li><code>scaffolds</code>
    <ul><li>骨架文件，是生成新页面或者新博客的模版。可以根据需求编辑，当<code>hexo</code>生成新博客的时候，会用这里面的模版进行初始化。
        </li></ul>
</li>
<li><code>source</code>
    <ul><li>这个文件夹下面存放的是网站的<code>markdown</code>源文件，里面有一个<code>_post</code>文件夹，所有的<code>.md</code>博客文件都会存放在这个文件夹下。现在，你应该能看到里面有一个<code>hello-world.md</code>文件。
        </li></ul>
</li>
<li><code>theme</code>
    <ul>
        <li>网站主题目录，<code>hexo</code>有非常丰富的主题支持，主题目录会存放在这个目录下面。</li>
        <li>更多的主题参见：https://hexo.io/themes/</li>
    </ul>
</li>

生成博客

直接输入以下命令：

1
2
3

hexo new post "test" # 会在 source/_posts/ 目录下生成文件 ‘test.md’，打开编辑
hexo generate        # 生成静态HTML文件到 /public 文件夹中
hexo server          # 本地运行server服务预览

如果显示INFO Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.那么恭喜，你现在已经可以成功生成了一篇博客，在浏览器打开 http://localhost:4000/ 即可预览你的博客。

Tips：如果你弄着弄着发现报错了可以试试先清空静态HTML文件，然后再重新hexo generate hexo server。

1	hexo clean #或者hexo cl也可以

现在我们看到的博客是Hexo默认的主题，更多的主题可以从官网下载。

详细的hexo命令也可以查看官方文档：https://hexo.io/zh-cn/docs/commands。

再Tips一下：由于每次都要开CMD有点麻烦，可以直接写个hexo clean&&hexo g&&hexo s然后下一次就可以直接用↑↓键调用历史命令。或者写个bat cmd /c "hexo cl&&hexo g&&hexo s" （g: generate; s: server）也是可以的~

添加建站脚本

为了后续netlify建站方便，我们可以在package.json里面的scripts下添加命令：

{
    // ......
    "scripts": {
        "build": "hexo generate",
        "clean": "hexo clean",
        "deploy": "hexo deploy",
        "server": "hexo server",
        "netlify": "npm run clean && npm run build" // 这一行为新加
    },
    // ......
}

GitHub文件托管

在GitHub里面建好一个repositories，public和private都可以，然后记住仓库的访问地址。我用的是http的方式，所以命令中的地址直接填就可以了。

cd "博客目录"
git init
git add .
git commit -m "my blog first commit"
git remote add origin "远端github仓库地址"
git branch -M main
git push -u origin main

Netlify建站

Netlify是一个国外的免费的提供静态网站部署服务的平台，能够将托管 GitHub，GitLab 等上的静态网站部署上线。我也不推荐使用github自带的gitpage，因为其访问速度慢。

首先注册并登陆Netlify（需要科学上网！）。没有CDN加速的博客网站也可能需要科学，但我自己试了下好像并不需要...?

登陆后找到Add new site 里的import an existing project，然后连接到GitHub并选择仓库，后面选项一切默认。

Tips：参考的文章里说需要把构建命令改成之前设置的npm run netlify，但是我试了很多次，如果这里改了，在后面更新博客的时候可能会在Building处疯狂报错，报错内容就是这里改的命令，试了网上的很多命令像是npm run build hexo g等等一系列方法均无效，后来清空了反而可以了...实战时还请自行判断吧。

构建完成后我们就能够看到一个URL，打开网址就是我们的个人博客了。如果你有域名的话，也可以可以根据提示设置一下。

配置域名

如果你想要设置方便一点、不想担心服务什么的，可以考虑买国内几大服务器厂商的域名比如阿里云什么的，现在域名也不算很贵，就是需要实名认证+审核备案，所以申请到下来的时间会比较长（可能会有小半个月以上）。

但是！~~秉承着白嫖到底的心态！~~我还是准备找个免费的域名！我找了个eu.org的二级域名，优点是已经服务二十多年了比较稳妥，但是需要人工审核，可能需要1-3个月。我这里还是推荐大家去找找别的域名（参考：《免费域名知多少？我刚做了个汇总！》）或者去B站看看教程。顺便要注意下其位置以及是否支持托管到CloudFlare（不过就我目前来看都不太需要他...原来的域名速度有点慢但是还是可以用的）。

不过因为我现在还没做到这一步，所以也就不多赘述了，有需要的话可以看看原作者。后面等域名下来我做的差不多了再把这一部分补全吧。