同样,像大多数游戏那样,取决于自己的水平与倾向,构建自己的网上公开博客也有不同方式、不同难度可选。限于本屁卡的半吊子水平,本文只介绍比较熟悉的 Hexo 博客程序搭建过程,分为 Easy 和 Normal 模式,Hard 和 Hell 模式就留待大佬们自己钻研了~

Normal 模式

标准个人网站构建方式。

成本

  • 时间,大量的时间
    折腾无止境,从开始折腾到网站、博客初步稳定运行,小白没个40小时时间拿不下来。
  • 域名
    腾讯云域名新购、续费、转入价格列表为例,.com域名60元/年,.cn域名35元/年,实际上腾讯云经常有各类代金券发放,就在写这一段时我现上腾讯云域名续费页面马上就看到了新的代金券(满55减50)派发,果断又花了10元给自己的另一个com域名续了一年,而本人博客所用的(pika666.cn)域名则是无门槛减200券抵扣后花了35元买了整整八年,到2024年才到期,因此域名成本价格一般是低于官方价格的。
    另外小白不建议贪便宜,或到namecheap、godaddy等网站购买域名。如果采用本文两种模式的建议,直接上腾讯云一站购齐,一个 QQ 号管理全部资源岂不美哉?
    域名购买很简单,输入自己心仪的域名后,如果未被注册,直接付款下单注册即可,为了以后省事建议直接实名认证(各省通管局要求)。

  • 云服务器或云空间
    免费空间也有,但不稳定,本文不予推荐。
    本人目前仍在使用腾讯云+校园计划提供的 1元/月 1核1G 1M 带宽的学生机(已绝版),日常运行 私人 OneDrive 网盘公开网页端百度贴吧自动签到 两个 PHP 程序和一个 PHP 博客 —— Typecho(无内容,仅作熟悉 PHP 博客用),目前支持通过实名认证、学生认证后购买的最便宜的云服务器是 10元/月(1核2G 1M,加8元送.cn域名一年)。

图1:腾讯云学生机体验版

  • 终端操作、HTML、CSS、PHP等基础水平技能
    毫无疑问既然买了云服务器,不装一个 Ubuntu 或者 CentOS 等怎么能表示出自己的与众不同呢?要是还是装一个 Windows Server RC 就没b可装了不是?所以这时候需要一个 putty 或者 xshell 来执行相关终端操作,另外在云服务器上搭建久负盛名的 Wordpress、Typecho 或小众的 Ghost 等 PHP 类博客程序,则需要稍微了解一些 PHP 基础,搭建网站首页(如本屁卡的网站引导首页),则需要了解一丢丢 HTML 和 CSS 基础。

    好吧,写到这里突然发现 Normal 模式对于小白来说还是太过复杂,真正能 Handle Normal 模式的人总有办法通过百度谷歌、CDSN、简书或其他技术分享网站找到部署网站的详细步骤。这属于写文章之前没有思考清楚文章受众的问题,自罚一杯。直接跳到 Easy 模式吧……

Easy 模式

基于静态博客程序 Hexo 的经济、方便、简单的个人网站部署方式。注:按照下列教程从无到有建立个人博客网站一共需要约 1-5 个小时的耐心操作时间(取决于悟性及基础),请选择空闲较多且心情较好的时候操作~

成本

  • 时间与耐心
    RT
  • 域名(非必须,但建议买一个)
    (同上)
  • 需要记住的常用命令与一些基础
    举例:
  1. git clone https://xxxxx ##克隆 Github 或 Coding 仓库到本地进行编辑修改
  2. git add . ##本地仓库产生修改后记录
  3. git commit -m “xxxxx” ##commit 修改项到 deploy_git
  4. git push origin master ##推送修改后整个仓库到自己的 Github 或 Coding 仓库
  5. npm npm install xxxxx –save ##安装 Hexo 静态博客及其配套模块所需的常用命令
  6. hexo new “xxxxx” ##Hexo 博客新建一篇标题为xxxxx的空日志
  7. hexo g ##基于当前本地博客内容生成可上传到网站的 HTML 树形目录(Public 文件夹)
  8. hexo d ##推送刚刚生成的 Public 文件夹到所设置的仓库
  9. hexo clean ##清除生成的 Public 文件夹和缓存,避免产生修改后重新生成新的 Public 文件夹时出现一些奇怪的问题
  10. Markdown 基础语法(如 # 多级标题,** 加粗,<br> 不影响缩进的换行,![图片描述](图片外链) 插入图片,[链接文字](链接网址) 插入超链接,> 引用等,具体可参考Markdown 编辑器语法指南

将博客安装到本地

  1. 安装 NodeJs
    Nodejs 官网下载合适版本(这里以 Winodws 10 64位 系统为例,下载 LTS 版),并安装,安装过程中记得勾选 “Add to PATH” 选项。注:本人 Win10 系统安装 NodeJS 时由于系统权限问题报错过,具体解决方案可以参考这篇文章

  2. 安装 Git For Windows
    同上,点击进入 Git 官网下载页,下载并安装,安装过程中许多复选框,无特殊情况一路下一步即可。

  3. 测试安装情况
    完成上两个步骤以后在左面右键鼠标,选择「Git Bash Here」项,这时会出现一个 类似 CMD 的批处理窗口,输入命令 node -v ,若出现 v 8.11.xx 等版本号字样,再输入 npm -v 若出现 v 5.6.0 等版本号字样表示安装完成,若显示未识别的命令,则检查前两个步骤的安装情况。

  4. 安装一款代码编辑器
    主流易用的代码编辑器有很多,可自行选择安装。
    如:参考这篇代码编辑器推荐文章
    个人在用 Atom 和 Notepad2,推荐至少要安装一个 Nodepad2(Zd423下载渠道),可替换为系统默认记事本编辑程序。

  5. 安装 Hexo 博客程序

    1. 在打算安装 Hexo 博客的目录文件夹中右键,选择「Git Bash Here」,输入命令 npm i -g hexo
    2. 初始化 Hexo 博客到选定目录: hexo init
    3. 安装本地博客预览服务:npm i hexo-server
    4. 安装git push hexo 工具:npm install hexo-deployer-git --save

    注意:使用 npm 安装 Hexo 博客程序及其相关功能模块时,可能出现各种各样的问题,本人数十次安装过程中总能碰见一些新鲜的奇怪报错,大多数报错复制报错信息如 npm WARNnpm err 等到百度谷歌搜索都可以找到答案,这其中大多数都是因为网络原因安装失败(由于 npm 上的软件包许多都依赖外网的资源),可以选择淘宝 npm 镜像解决:
    在 Git 命令行中输入命令 npm config set registry https://registry.npm.taobao.org 以设置 npm 到淘宝镜像加快下载速度;
    或可直接使用淘宝镜像定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:npm install -g cnpm --registry=https://registry.npm.taobao.org
    然后重新安装相关模块。

  6. 测试 Hexo 博客程序
    在 Hexo 博客安装目录文件夹空白处右键,选择「Git Bash Here」,输入命令:hexo s,当出现「INFO Start processing」字样后,打开浏览器,输入网址 127.0.0.1:4000 即可本地预览你的 Hexo 博客啦!如果没有样式错乱或奇怪的报错则大功告成!将来写博文的时候也可以写点内容,保存,预览,然后再写。
    退出预览则同时按下 CTRL+C 即可。

Hexo 博客基础操作及优化

博客基本配置

修改 Hexo 博客安装更目录下的 _config.yml 文件,Win系统未能识别此后缀,打开方式里选择记事本或刚刚安装的代码编辑器(如替换 Notepad2 为系统记事本则可直接在打开方式里选则记事本),注意编码一定要为 UTF-8 模式。修改说明可参考文档:https://hexo.io/zh-cn/docs/configuration.html

任何 Hexo 操作均可参考 Hexo 官方中文文档:https://hexo.io/zh-cn/docs/index.html(请带点耐心)

博客主题与插件

如果你注意到了自己安装预览后的博客样式跟本屁卡的不太一样,甚至觉得有点丑(默认主题 landscape 真的挺丑),这时候你可以搜索关键词: Hexo 主题,或访问 Hexo 官方主题列表查看选择自己心仪的主题并按照文档教程下载使用。

大多数优秀主题都集成了许多功能,如 fancybox、站内搜索、评论系统、特殊渲染功能、音视频在线播放模块、访客统计等,需要按照主题要求安装相关支持模块(即插件,如本博客采用的 maupassant 主题需要安装 pug 和 sass 渲染模块),许多资源由于依赖资源被墙,npm 安装其过程非常心酸,最后使用 cnpm 安装则比较顺利。

创建新的文章并通过 Markdown 语法写作

参考 Hexo 官方文档:https://hexo.io/zh-cn/docs/writing.html,在 Hexo 博客安装目录文件夹空白处右键,选择「Git Bash Here」,输入命令 hexo new [文章标题],出现“INFO Created xxxx.md”字样表示创建成功,打开博客安装根目录下的 source 文件夹中的 _post 文件夹,则会出现一个 文章标题.md 的文件,可以使用记事本或其他代码编辑打开并编辑,具体语法参考Markdown 编辑器语法指南)。

我个人更喜欢随时随地一点一点写,比如本文的四天写作过程中我分别在家中、医院、路上都写了其中一部分,这时就需要一个可以随时云端保存并读取的 Markdown 编辑器,这里强烈推荐马克飞象(分国际国内版,国内版绑定印象笔记,国际版绑定 Evernote,我选用的是国际版),无需繁琐操作,只需绑定(没有则注册一个)Evernote 笔记账号即可在马克飞象网页端随时编辑,随时保存到云端,写作完成后,只需要全部复制 MD 片区(下图左侧)的内容,粘贴到 hexo new 命令生成的 xxxx.md 文件中保存,然后 hexo g 编译完成后,再上传至托管服务(下面会介绍两种托管服务方式)即可。
图2:马克飞象编辑界面

Hexo 博客进阶操作

非本文写作目的,暂时略过。可自行通过 Hexo 博客官方文档和百度、谷歌等学习进阶操作技巧。

上线博客

  1. 注册购买一个域名(如选用托管到对象存储的方式则必须有)
    购买域名很简单,以腾讯云为例,首先注册腾讯云账号(直接使用 QQ 登录即可),然后最好先实名认证,可以使用已经绑过银行卡的微信钱包扫码认证。然后打开腾讯云新用户域名注册优惠页,选择一个心仪的域名,加入购物车,填写实名信息,付款购买后即可。

  2. 选择上线网站的方式(两种方案,二选一即可)

① 托管到 Coding Pages

此种方式可用 Pages 提供的三级免费域名,除了 Coding Pages 还有 Gitee(国内)和全球最大的同性交友平台 Gayhub(国外) 也支持静态网站托管,但综合起来仍然推荐Coding,不仅国内访问速度较快、服务器位于香港,免备案,而且支持自定义域名。

注册一个 Coding.net 账号,创建仓库,在左侧“代码”中开启静态 Pages,然后复制仓库地址(下图红框处);
图3:Coding 仓库的地址

然后修改 Hexo 博客安装根目录下的 _config.yml 文件中的 deploy 项,tpye 填写为 git,repo 地 址填写为刚刚复制的仓库地址,branch 填写为 master(如果没有则不填),保存。

注意:配置 _config.yml 文件中的所有项目,英文半角的「冒号」后均需要有一个空格,否则编译时必报错

进入 Hexo 博客安装根目录,右键选择「Git Bash Here」,输入 hexo g -d,首次推送本地文件到 Coding 仓库需在 Git 命令行中输入账号密码,根据提示输入即可,上传成功会出现 100% …… xxx –> master 等字样,这时浏览器访问 http://[用户名].coding.me/[仓库名] 即可看到和刚刚预览时一模一样的页面。

如果有自己购买的域名(以在腾讯云购买的域名为例),可在腾讯云解析控制台选择购买的域名后面的「解析」选项,然后设置解析到 pages.coding.me,然后再在 Coding 的仓库 –> 左侧“代码” –> 静态 Pages –> 自定义域名中输入相同的前缀域名(下图第一个框,如 www.xxx.xxx 的前缀为 www,不要前缀可在腾讯云的云解析控制台(下图第一个框)填 @,然后 Pages 自定义域名处不填前缀,直接填xxx.xxx即可),待解析生效后即可通过访问自定义域名打开你的网站啦!
图4:腾讯云域名云解析控制台添加新解析记录

Coding Pages 支持一键申请并配置 SSL 证书,支持HTTPS访问,可在配置 Coding Pages 设置自定义域名处勾选强制“HTTPS”访问。

以后每次在本地更改 Hexo 博客内容(如修改博客样式、配置、编辑以前写过的文章、新添加文章等)后都需要在 Hexo 博客安装目中打开 Git 窗口输入命令 hexo g -d (最好在每次执行 hexo g -d 之前先执行一次 hexo clean 避免潜在 BUG)重新推送新生成的内容到 Coding 的仓库和 Pages。

② 托管到腾讯云 COS(对象存储)及 CDN

本屁卡的博客和导航页都采用这种方式托管,不受地域限制,访问速度都贼鸡儿快,不像我那台位于广州的学生机,东北地区访问延迟就会高一点。
腾讯云的对象存储(CoS)和全球分发网络(CDN)非常良心,实名认证的用户每月赠送 10GB 免费流量(作为参考,正常情况下*本站每月总流量约 30-150MB),完全够用,且即使流量超出了,费用也非常便宜。甚至如果真的不够,还有褥羊毛的办法:腾讯云账号一个身份证号最多可以认证5次,也就是说可以一个人注册5个腾讯云账号,即可拥有 250GB 免费存储和 50GB 免费月流量,比如我就注册了两个,一个拿来当图床和附件盘,一个拿来托管博客和导航页的静态网站资源。

注*:这里的正常情况指的是网站普通访问状态,上个月本屁卡因为搞事导致自己的博客受到 DDOS,即短时间超大流量访问网站,导致网站瘫痪(腾讯云会监测并暂停受到 DDOS 的机器或服务),并在当天产生了高额的流量(被 D 了没几分钟就被腾讯云监测到了然后暂停了服务,然而即使就几分钟,也消耗完了当月的免费流量并超出了 15GB)和费用(5元多钱,这半年来花到 CDN 上唯一的一笔费用),这种因为 DDOS 而导致产生高额流量费用的情况可以通过配置 QoS 和流量峰值限额而避免,只不过当初认为自己的小破站不会有人 D 所以偷懒没有设置。)
图5:腾讯云的DDoS告警/停服邮件通知

①首先打开腾讯云对象存储控制台,登录刚刚购买域名时创建的腾讯云账号(可用QQ登录),点击“创建Bucket”,名称随便填,如填个 Blog 即可,地域随便选,反正最后使用 CDN 加速全国访问,存储桶地域不影响访问速度;访问权限为“公有读私有写”;CDN 加速选择开启,然后确定,等待存储桶初始化完成。

②初始化完成后点击刚刚创建的存储桶名称,进入存储桶设置,顶栏默认选中的是“文件列表”,切换至“基础配置”,勾选“静态网站”中的“开启”和“Index 索引”,状态码可留至以后再配置,点击保存;然后再切换至“域名管理”,在底部自定义域名中点击添加,输入你刚购买的域名(如下图),点击保存,然后 CHAME 列会出现一个 xxx.xxx.xxx.cdn.dnsv1.com 记录,复制这条记录,在腾讯云域名云解析的控制台(如图4)添加 CHAME 解析记录,前缀同你在自定义域名里填的一样(如 blog,如果自定义域名里没填前缀,则在云解析控制台的主机记录项填 @)记录值填刚刚复制的网址,保存。
图6:对象存储绑定自定义 CDN 加速域名

③然后点击自定义域名的“高级配置”选项,进入 CDN 配置,首先切换到“访问控制”项,防盗链功能可开启(减少可能的站外引用资源(如图片)的流量消耗),防盗链具体配置可以参考下图(其中两个 xxx.myqcloud.com 域名为刚刚配置对象存储 - 域名管理 - 自定义域名页面中的默认域名的第一个和加速域名):
图7:CDN 的防盗链配置

然后开启“IP访问限频配置”,单IP访问阈值建议设置为 10-30 PS(视网站访问量而定,我设的是15);然后再切换到“高级配置”项,开启“带宽封顶配置”,封顶阈值建议设置为 10-50Mbps(视网站访问量而定,我设的是30),勾选“访问返回 404”,点击确定,可以有效防止网站被 DDoS 而“破产”。

HTTPS 配置首先需要自行申请 SSL 证书,由于非必须且稍复杂,本文暂时略过,留待将来再折腾吧~

全部配置完毕后需等待 5-10 分钟,CDN 配置生效比较慢(因为 CDN 配置需要同步到全国近百个地域网点服务器)。

④下载安装腾讯云对象存储迁移工具必须的 JAVA 运行库,点击这里访问 JAVA 官方网站,按照下图红框标识选择下载包。
图8:JDK 安装包选择

安装过程请参考腾讯云写的文档:https://cloud.tencent.com/document/436,注意添加 PATH 的时候粘贴在已有项的后面,不要直接全选粘贴,这样会替换掉已有的 PATH 项目导致 CMD、Git、NodeJS 等命令行工具失效(血的教训,导致我直接重装系统了)。

安装完成后在桌面右键,选择「Git Bash Here」,输入命令 javac 后出现 ?÷?: javac <options> <source files> 及一大堆项目字样即表示安装成功。如果提示未识别的命令,则重新按照上面的文档教程重新安装一遍并设置 PATH 等项目(我当时进行这一步的时候来回安装了五六次才成功)。

点击这里打开腾讯云 COS Migration 工具的 Github 仓库,打开页面有点击右边的绿色按钮 “Clone Or Download”,选择“Download ZIP”,下载压缩包到本地,然后解压,接下来修改解压出的文件夹中的 conf 文件夹中的 config.ini 文件(建议使用 nodepad2 打开)。

点击这里打开腾讯云 COS Migration 工具的说明文档,根据文档说明配置对象存储上传参数(这个文档写的足够清楚啦),其中参数选择:迁移类型填 type=migrateLocal;secretId 和 secretKey 去腾讯云 API 密钥控制台复制后粘贴到相应等号后面;bucketName 可复制第③步配置防盗链时加入的对象存储域名前缀(如 blog-xxxxx.cosgz.myqcloud.com,复制 blog-xxxxx 粘贴到 bucketName =后面即可);region 根据文档中“可用地域”页面查询到的地域代码(创建对象存储的储存桶Bucket 时选择的地域),复制粘贴即可;localPath 项 填写为 你的 Hexo 博客安装路径\\Public ,如localPath=F:\\Blog\\public;其他参数项目均使用默认参数即可不用修改。

⑥修改并保存 config.ini 文件后,在 Hexo 博客安装根目录文件夹空白处右键,选择「Git Bash Here」,输入命令 hexo g,等待编译完成后,别急着关闭 Git 窗口,这时根目录里会多出一个“Public”文件夹,然后打开刚刚设置完成的 COS Migration 工具文件夹中的 start_migrate.bat 批处理程序,等待上传完成会出现 “ALL_OK” 字样,然后再在刚刚没关闭的 Git 窗口中输入 hexo clean 清空生成的“Public”文件夹和其他缓存,方便下次修改内容后重新生成新的“Public”文件夹避免和之前的旧文件发生冲突;然后大功告成!现在就可以访问刚刚你设置的自定义域名打开网站查看效果啦~

以后每次在本地更改 Hexo 博客内容(如修改博客样式、配置、编辑以前写过的文章、新添加文章等)后都需要在 Hexo 博客安装目中打开 Git 窗口输入命令 hexo g,然后打开 COS Migration 工具文件夹中的 start_migrate.bat 批处理程序以重新上传新生成的“Public”文件夹,然后输入 hexo clean 收尾。

注意:上传到 CDN 的新内容会在几秒内同步完成,但为了节省计算资源,腾讯云 CDN 默认不会随时更新已有的文件,所以覆盖上传的新内容生效时间可能在数分钟内至整整一周不等,如果等不及可以打开 CDN 手动刷新页面选择“目录刷新”,输入你的博客网址,点击提交;我为了图省事专门搞了一个 PHP 自动刷新脚本在每次上传后自动刷新 CDN,如下图。小白就稍微麻烦点,手动刷新吧~

图9:自动刷新 CDN 目录

结尾

写完这篇文章以后再来回答在文章标题中提出的问题,我的答案是看起来还真有点复杂,看起来整个过程好像也不像是想象中的那么 “Easy”,感觉行文对小白仍然不够友好 /捂脸笑哭……

估计小白看这篇文字看到一半都头疼放弃了,而大佬看这篇文章就像看幼儿园读物一样,在繁忙的实习过程中牺牲了好多休息时间,一共花了四天写作的本文,在结尾的时候才发现好像没什么潜在受众啊,也不知道是图什么……

不知道各位看官觉得难吗?如果有空请在评论区提些意见吧(虽然不一定会改) QAQ ~

小白在按照本篇教程操作时遇到任何问题欢迎与我取得联系~ 不过在联系我之前务必先阅读:提问的智慧。着急或多日未回复的话可以点击这里与我取得即时联系,不着急的则可以在留言区留下疑问等待本屁卡滴回复。PS:留言时填写邮箱可以收到回复提醒邮件(大概)