从零开始搭建个人网站博客

2023-11-06 07:39:03 浏览数 (1)

为什么要写作

  1. 职场积累的输入输出，不记录下来则会忘记。
  2. 个人的成果需要有更多的展示平台，IT是手艺活，需要有自己的作品。
  3. 写作是很好的学习方式，通过写作倒逼自己学习，而不是一味看各类文章，看只是一部分，如果要深入理解知识，必须自己写出来。

为什么要搭建个人博客

  1. 我也有公共平台，这类的公共平台有流量和关注，可以好好维护。
  2. 随着网络的发展，监管随之而来，个人网站更自由，是更好的文章归类的地方，并且自己维护更加放心，不想自己的心血有朝一日404。

搭建个人博客的流程

厘清步骤

  1. 购买云服务器（时间久一些，最低配置）
  2. 购买域名（云服务器厂商是同一个云服务厂商）
  3. 备案（2个）：ICP域名备案、公安的备案
  4. 云服务器做好登录配置，安装配置 nginx、https
  5. 选择博客的静态网站生成器，选择主题，制作第一个博客，更新到服务器。

接下来，就是每一个步骤的细致拆解，对于一个开发工程师来说，其实是很简单的。

但简单不意味着可以立马手到擒来，我工作了7年了，现在才明白：简单的事情细致的做，做好、做对，坚持做正确的事情，就很棒了。

购买云服务器

云服务网站操作使用

  • 阿里云、腾讯云的web网站大而全，模块、功能很多，不过提示、说明、购买操作等都很方便，在首页中间的搜索直达很方便，我们使用的一般就几个：云服务器、域名、备案，输入这些关键词就可以命中对应的功能模块，多花点时间浏览页面，时间久了就熟悉了。
  • 后续的说明不会一步一步截图说明步骤流程，我自己在找教程做网站的时候，那种一步一步的教程看似有用，但网站会更新，很多操作就没用了，实际上是要弄清楚做这些事情的来龙去脉。

云服务器和轻量应用服务器的区别

  • 云服务器适合架构复杂的应用场景，如高并发网站、大型游戏、复杂分布式集群应用、视频编解码、大数据分析、机器学习、深度学习等；
  • 轻量应用服务器更适合简单一些的单机应用，例如企业网站、博客、商品展示类网站、微信小程序、通用Web应用场景、移动端APP、小程序、云盘、图床、云端开发测试环境及学习环境等。

以上，我选择的是云服务器，可以DIY，至于配置，越便宜越好。

可选择的云服务器厂商很多，比如：阿里云、腾讯云、华为云、移动云、联通云、金山云，我觉得选择大牌、便宜的即可，我挑选了便宜的腾讯云，我们做的是长远的事情，要看10年的，所以大公司的更保险一些。

配置和价格如下

价格说明
  • 所需要购买的是：CPU内存、带宽、磁盘，这3样都需要，价格单独计算，不过合并打包一起后，购买更便宜，我们做长久打算的话，这种付费都是预付费，如果预知未来这些是涨价的情况下，则趁着活动价直接买断5年、10年的价格，这样性价比更高。
  • 各类活动：双十一、六一八的时候，阿里云、腾讯云有做活动，新老顾客都有，但最优惠的是新人活动，我的2018年已经用掉了好几个云厂商的新人优惠，所以这次购买的贵了一些。
配置合计
  • 操作系统：阿里云或者腾讯云维护的Linux系统（TencentOS），可更新，有维护，免费
  • CPU和内存：2核、2GB，也是最便宜的，收费
  • 带宽：1Mbps，有公网IP可访问，收费
  • 系统盘：高性能云硬盘网络，这里有不同价位的，估计是材质不同吧，我选择了最便宜的，收费
  • 总计价格：购买的时候1314元5年，772.2元3年，1314平均后是21.9元/月，772.2平均后是21.45元/月，我觉得对于一个简单的个人博客网站而言，22元/月是能接受的。

购买域名

  • 域名最多买10年，前几年不需要续费，最后一年估计会提醒续费。
  • 顶级域名是后缀，比如com cn vip top 等等，价格不一样。
  • 我买的是10年的，xiaoqiuqiu.cn，价格也比较透明，330 ，也是中等价格。
  • 20年前很多公司开始炒作、囤积域名，所以很多短小、顾名思义的域名都在这些公司手上，不过现在域名不再重要，我们挑选合适的即可。
  • 很多年前，阿里云收购了万网，腾讯收购DNSPOD，都开始做域名生意。

为什么域名购买和服务器购买需要在同一个平台

域名备案的操作需要有一个依托的服务器，假如：域名在阿里云，云服务器在腾讯云，则数据无法打通。域名和服务器都在阿里云或者都在腾讯云的话，两者一绑定，数据一关联，页面操作会简单很多。

ICP备案（管局审核）

  • ICP是Internet Content Provider的简称，做网站相当于是网络服务提供商，这个是工信部在管理，备案信息网站是：https://beian.miit.gov.cn
  • 域名和云服务器都在在腾讯云，则备案很方便，备案主体可以是个人、公司，都要填写真实信息，首先腾讯云审核一遍，再提交到工信部审核，个体（个人、公司）无法直接去工信部审核，需要有对应有资质的公司作为中介才行，所以绑定某个云服务厂商最方便。
  • 备案的个人信息很全，所以网站不能有不良信息，否则很危险，所以国内的危险网站都是在东南亚，那里的网络监管猜测就是很宽松。
  • 不需要购买备案服务，这都要钱，根据操作手册一步一步填写提交，难度很低。整套流程在5-8个工作日，最后审批的ICP备案号和省份绑定，比如腾讯公司官网下面的备案号是：ICP备案/许可证号：粤B2-20090059，我的备案号在 https://xiaoqiuqiu.cn  可看到。

公安备案（完成ICP备案后操作）

  • 全称是：全国公安机关互联网站安全管理服务平台，网址是：https://beian.mps.gov.cn，这个是公安部的备案
  • ICP网站备案成功后，网站开通之日起30日内可以去公安部完成备案
  • 和ICP备案一样，也是填写一大堆的真实信息，提交审核，等待1-3个工作日。

配置服务器

配置https

https是可配也可不配，但我认为现在正经网站都要用到https了，而且也很简单，所以就配置了，否则浏览器都会说这网站不安全。

  1. 在腾讯云中可以申领免费的1年的https证书，如果是多年的而且证书更全的那种就要收费了，而且收费很贵，我们博客只需要1年1年自己手动维护即可。
  2. 搜索框中搜索「SSL 证书」，有按钮「申请免费证书」，根据操作实名填写信息，等待审核，几分钟就审核通过，再把证书文件下载到本地。
  3. 看描述是腾讯云最多只有50份免费证书，但七牛、阿里云等其他各式各样的厂商都可以申请证书，数量不用担心。
  4. SSL证书和域名绑定，这样域名就可以通过浏览器的安全校验了。

服务器配置注意事项

其实，云服务下来后，就可以直接使用了，备案的2个步骤可以同步进行，因为使用公网IP登录服务器是没有什么限制的。

就我使用的几天来看，有几点需要配置和注意（具体的配置步骤，就不写了，可以自行搜索查询）。

  1. 开通常用的端口，在「服务器列表-安全组」里面，可以使用推荐的规则，入站、出站都开着，ICMP、SSH等，端口有：80、22、3389，就是说 ssh http https 都要开启，否则网页无法访问。
  2. 增加自定义ssh登录用户，比如名字是 abc，关闭 root的ssh登录，因为我们没有购买安全监控，很多国外IP会扫描各类云服务器IP，使用root碰撞尝试登录后台。
  3. 使用 yum 安装 nginx，因为大部分博客是静态html页面，需要nginx来做反向代理，指向基础的index.html页面。

nginx.conf 的配置

以下是需要注意的点，具体的操作也是单独各自百度查询处理。

配置这些就是为了：用443端口访问服务器，通过nginx得到实际的index.html文件，再在浏览器中渲染dom展示出来。

  1. 80端口重定向到443端口，这样就强制使用https，而不是http了，浏览器网址栏就有个安全的小锁。
  2. 上传https的安全证书（pem key后缀）到某个自定义路径，nginx.conf配置中 ssl_certificate 的值就放pem文件的绝对路径，ssl_certificate_key就放key证书的绝对路径。
  3. 自定义错误页，出错了可以有好看的错误页。
  4. server_name绑定域名，root存放静态博客的绝对路径。
  5. 关闭浏览器缓存no-store, no-cache等等。

使用博客网站生成器生成网站

博客形态的静态站点生成器有：Jekyll、Hugo、Hexo，这些都是国外的网站，网站中有各个用户制作的主题。

原理大多类似，原理：有一个模版目录，其中包含原始文本格式的文档，通过 Markdown 或者 Liquid 转化成一个完整的可发布的静态网站，可以上传到服务器中。

在这样的博客站点中，需要有对应的代码环境执行命令，在自己的电脑（Windows or macOS系统）生存html css js 文件，然后再上传到服务器中，服务器就不需要对应的Node.js or python 环境了。

一开始我选用的是docsify来生成网址，这是Vue.js开发的的小清新绿色背景网站，缺点是扩展性不强，左侧树无法自定义多种左侧树，而且没有标签云，所以放弃。

最后选用的是 hugo，主题是: Next，安装环境，下载主题，然后修改为自己的配置、logo等等，本地的配置就改好了。

PS: 如果github不好上，可以考虑gitee

hugo安装步骤
  1. 安装好准备 Git Node.js 的本地环境
  2. 在 hugo 官网安装 hugo，这有2种，一种是 hugo，另一种是 hugo extended，extended是hugo的复杂版本，功能更多，直接装extended，就要去github的releases找安装包，我的是macOS，安装文件是：hugo_extended_0.118.2_darwin-universal.tar.gz，附上网址：https://github.com/gohugoio/hugo/releases，选择合适的版本和操作系统，下载即可。
  3. 在hugo官网下载主题（theme），放到hugo的目录中，相当于hugo extended next theme 就起效果了，所谓的主题就是已经做好的css样式的合集。
参考的文档

https://lisenhui.cn/blog/upgrade-blog-use-new-theme.html  https://themes.gohugo.io/themes/hugo-theme-next/   https://gohugo.io/getting-started/quick-start/   https://gitee.com/hugo-next/hugo-next-docs   https://github.com/gohugoio/hugo/releases 

一些具体的配置
  • 我们需要把config.toml和content文件夹复制到我们的新建的站点目录下
  • config.toml 是配置文件，在里面可以定义博客地址，构建配置，标题，导航栏等等。
  • themes是主题目录，可以下载喜欢的主题，然后配置在config.toml里面。
  • content是博客文章的目录。
  • static是博客的静态资源，比如图片
  • public是编译后的目标文件的目录。
  • 注：当前目录是你的源文件，也就是包括一堆模版，博客源文件（markdown），配置文件，图片的一个源文件的集合。最终展示在网页的是目标文件，也就根据你的资源和配置，最终生成的一个个包括css，js的html网页。
  • 在终端中执行：hugo server –buildDrafts，以上为默认启动，–buildDrafts用于是否显示草稿文章，其他的 hugo 命令，可以 hugo –help 看下，或者直接看文档。
静态博客和动态博客的区别
  • 静态网站：网站的html结构和链接的文章都已经固定了，自己电脑做好结构和目录，然后使用xftp等软件远程上传到服务器。
  • 动态网站：有交互，有登录、评论、收藏、用户系统、管理系统等，需要维护：管理端前端代码、用户端前端代码、服务器后端代码、MySQL、Redis，如果有全文检索则还有ES等等，如果仅有一台服务器，则安装这些环境就不太够用了。
  • 静态网站简单，是输出展示型的；动态网站复杂，可以搜集：用户数据、流量数据等，当然是动态网站好，但是机器不够用啊。如果未来感觉到网站越来越好，那从静态网站迁移到动态网站就可以了。
hugo 博客

0 人点赞