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

本文涉及的产品
.cn 域名,1个 12个月
简介: 从零开始搭建个人网站博客

前言

为什么要写作

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

为什么要搭建个人博客

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

搭建个人博客的流程

厘清步骤

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

接下来,就是每一个步骤的细致拆解,对于一个开发工程师来说,其实是很简单的,但简单不意味着可以立马手到擒来,我工作了5年+了,现在才明白:简单的事情细致的做,做好、做对,坚持做正确的事情,就很棒了。

购买云服务器

云服务网站操作使用

  • 阿里云、腾讯云的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备案后操作)

  • 全称是:全国公安机关互联网站安全管理服务平台
  • 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://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等等,如果仅有一台服务器,则安装这些环境就不太够用了。
  • 静态网站简单,是输出展示型的;动态网站复杂,可以搜集:用户数据、流量数据等,当然是动态网站好,但是机器不够用啊。如果未来感觉到网站越来越好,那从静态网站迁移到动态网站就可以了。
目录
相关文章
|
网络安全 开发工具 git
从零开始搭建属于自己的hexo博客
整个搭建过程大概需要30分钟不到,请各位控制自己的时间~
138 0
|
JavaScript 开发工具 数据安全/隐私保护
手把手教你打造炫酷个人博客:从零开始到成功上线
手把手教你打造炫酷个人博客:从零开始到成功上线
135 0
|
域名解析 缓存 JavaScript
手把手教你从零开始搭建个人博客,20分钟上手
手把手教你从零开始搭建个人博客,20分钟上手
384 0
手把手教你从零开始搭建个人博客,20分钟上手
|
存储 JSON 前端开发
手把手带你搭建个人博客系统(二)
手把手带你搭建个人博客系统(二)
134 0
手把手带你搭建个人博客系统(二)
|
前端开发 JavaScript Java
手把手带你搭建个人博客系统(一)
手把手带你搭建个人博客系统(一)
364 0
手把手带你搭建个人博客系统(一)
|
存储 缓存 JavaScript
第一次搭建个人博客
以前一直都是用的开发环境,从来没有想过在服务器上搭建一个网站。本来因为搭建博客会很简单,没想到单单的配置mongodb就花了我将近一天的时间。最后迫于无奈只能用宝塔面板来搭建我的个人博客了
第一次搭建个人博客
|
JavaScript Shell Linux
从0到1手把手教你搭建个人博客
从0到1手把手教你搭建个人博客
从0到1手把手教你搭建个人博客
|
缓存 JavaScript 前端开发
手把手教你从0开始搭建个人博客,东半球最详细的保姆级博客搭建部署教程 | 程序员人手必备个人博客网站
手把手教你从0开始搭建个人博客,东半球最详细的保姆级博客搭建部署教程 | 程序员人手必备个人博客网站
手把手教你从0开始搭建个人博客,东半球最详细的保姆级博客搭建部署教程 | 程序员人手必备个人博客网站
|
存储 数据库
个人博客搭建
阿里云真给力
个人博客搭建
|
弹性计算 安全 Linux
如何使用阿里云简单的搭建自己的博客
使用PHP集成工具phpstudy,简易搭建word press个人博客
415 0
如何使用阿里云简单的搭建自己的博客
下一篇
无影云桌面