建站系列是一个建站路径的梳理整合。

决策要素:网站框架、域名访问、资源存储、运维管理、创作更新

难点:技术吃力,认知模糊,运维繁琐。

在一切起步之前,需要先对自己的出发动机未来发展规划心中有数。对自己的需求和网站相关技术的不明晰,都会导致沉没成本。

搭建网站不难,在网上搜索教程就能选择一个跟着上手;甚至我们说做什么事情的起步都不难,难的是在这条路上一直走下去,能解决每一个 bug、完善每一点细节,能坚持如一更新内容,能进步创新、做出名堂……对于网站以及任何形式的媒体来说,唯一的重点都是“内容”。好看的皮囊能吸引惊鸿一瞥,有趣的灵魂能聚汇长久的引力。


(一)建站首要:以定位取框架

为什么要建网站?网站的定位是什么?

  • 展示型:是个人独立拥有的域名/品牌/作品集,是个性/才能/思想的展示、创作作品的输出方式之一。
  • 商业型:流量变现渠道之一,通过增值业务/信息付费盈利。
  • 论坛型:搭建一个同好交流平台,分享资源/观点/作品。
  • ……
    根据不同的网站定位有不同的侧重取向。例如展示型一般侧重网站设计定制性,论坛型可能更侧重网站数据管理,应该在了解不同建站框架的经营模式的基础上着手。
    网上能搜索到手把手的操作教程,本文不一一细数,仅对决策层尝试提供参考意见。

一、网站构建框架的可选方案

从网站数据处理方式分类,可分为动态网站和静态网站。

关于选择动态还是静态,可参考👉个人博客如何选择Typecho和Hexo? - 知乎@明月登楼

A. 动态网站 (花钱省心)

动态网站可以根据时间、环境、用户或数据操作来展示不同内容,一般以.php/.jsp/.net 结尾。有前端后端,登录后台来管理,通过即时调用数据库来展示网站的叫“动态”。多数主流网站都使用“动态”技术,如社交媒体网站、会员网站、在线商店、新闻网站。

方案要求:进阶需求要 markdown/html 写作、PHP/JSP/ASP、Java、Python 等相关技术门槛。

¥域名 +¥服务器+ 设计搭建 + 部署服务器 = 一次搭建,终身享用,在线更新

  • 缺点:①要配置用来安装后端服务和数据库的独立服务器(要买个云服务器主机),②后端处理更多,前端渲染内容的步骤更多,会慢(可能要优化配置访问加速),③服务器要管理调优(后端维护成本)。
  • 优点:①自定义功能插件丰富。②网站交互性强,更新便捷。③登录 CMS 控制台编写文章,随写随发布,毋需 IT 技术基础。
  • 适合注重用户生态的网站(注册登录、大数据推送等)。适合愿意花钱的编程小白。
如何选择动态框架的平台?

参看:做网站有那些网站程序?- 知乎@寒龙亦

  • 主流 成熟 采用HTML编辑器(富文本/无技术门槛):
    • PHP + WordPress(博客程序)个性化博客/企业门户站/商场批发等,免费开源的建站系统,扩展性强。较臃肿,对主机配置有要求,要做优化配置。
    • DISCUZ!(论坛程序)腾讯旗下的简中社区论坛系统,市场体量大。功能收费;人气不如两微一抖等社区。
    • 织梦cms免费开源内容管理系统,和discuz一样接地气,技术门槛低。
  • 国内 开源 采用MarkDown语法在线撰文:
  • 国外 开源CMS建站系统:

B. 静态网站 (穷人优选)

代码写死,每个用户、每时每地访问网站的所见内容都是一样的,一般以.htm/.html 结尾。纯前端,直接生成纯 html 网页文件的叫“静态”(是内容写死而不是没有动态画面效果)。

方案要求:markdown/html 写作、命令行、CSS、JavaScript 等相关技术门槛。

¥域名 + 网页文件托管平台 = 代码搞定一切

  • 缺点:①没有网站后台、没有文章编辑器,几乎都基于“简陋的代码”来设置和操作。②动态功能受限,要通过 JS 脚本局部获取数据库,如果需要一些动态功能如“评论”“购物”,则必须借助第三方服务。③无法为访问大众定制展示内容。④网站交互性弱,更新麻烦(改个标题要重新上传整页 HTML 源码)。
  • 优点:①没有独立服务器(不需要买云服务器),而是利用支持 HTTP(S) 协议的文件存储 PaaS 服务(如阿里云 OSS)发布内容。快速廉价地启动一个基本网站,入手门槛低。②后端处理少、缓存快,网站访问速度快。
  • 对自食其力者来说性价比最高。适于技术宅、程序员、工程师群体的个人博客。不适于“动态”需求重的网站。
如何选择静态网站框架?

在安装好代码运行环境的基础上安装框架,静态网站才能运行。

  • 基于NodeJS+ Hexo是当前静态博客的主流。相较于Jekyll/octopress网站框架,Hexo的编译更快、部署更简单(因为jekyll基于Ruby语言,配置麻烦),中文支持更好(因为作者来自中国台湾)。Hexo 内建 Swig 模板引擎,可以另外安装插件来获得 EJSHamlJadePug 支持,Hexo 根据模板文件的扩展名来决定所使用的模板引擎。参考 hexo模板 以获得更多信息。
  • 基于Ruby语言+RubyGems+Linux/Unix/Mac OS X+Python+NodeJS+ jekyll是很多技术人员的选择,Jekyll官方不建议在Windows下运行。
  • Git+NodeJS+ VuePress是Vue驱动的静态网站生成器,同样是简单便捷的框架,但比Hexo年轻,插件与用户生态尚未丰富。
  • 基于Go语言开发的Hugo

C. 半静态网站 (用技术省钱省力)

半静态网站,可动态更新,但依赖于后台构建系统。

适合专业人士,不适合精力不多的编程小白。

参看:Growth:全栈增长工程师指南

D. 自制框架(最自由)

利用自己熟悉的语言,自己开发框架,再把项目部署到私人服务器上。只要动手能力足,完全可以快速地静态转动态。

除非是想入行/是大师球,建议外行者不要走向开发者的漫漫头秃路。

E. 模板建站 (懒但坑多)

在动态网站费钱、静态网站费脑的情况下,对技术小白友好的模板建站/智能建站平台是很多人的选择。然而在踩过一年 Baklib 坑后我认为这类所谓“自助建站”的框架本质上还是会像 UGC 平台一样,主权全在平台手里。

方案要求:无技术门槛,付费获得进阶服务。

  • 优点:注册账号后就能像动态网站一样通过“后台”网站管理面板来设计网站或发布内容,富文本编辑无代码能力要求。
  • 缺点:①功能定制性局限于平台提供的服务,无法放开手脚 DIY,无法满足较高的个性要求。②数据流通性差富文本编辑看似简单实则耗时,跨平台粘贴时要浪费时间在格式排版上,而非 markdown 或 HTML 标签那样可以跨平台通用。③最重要的一点,数据导出的坑,大多平台的数据导出不会有 JS 等功能源码或 html 等通用源码,甚至无法导出困死在平台里。例如 baklib 导出是所有文章塞在一个 json 文件。实际上导出后难以直接完全还原网站,最终还是需要用户自己耗费精力用技术能力搬运转换。④所有服务的质量赖于平台良心。若平台不支持本地化或跨平台云存储/托管,仅支持在线使用,那么平台倒闭=数据清空。
  • 适合不愿折腾的编程小白。
  • ❗选择模板建站首先看数据导出是否支持 js、css、html、markdown、pdf 等通用格式。其次看平台提供的功能模板是否满足自己的建站需求。
模板建站平台的白名单?

参看:wolai我来正式版已出,你会选择付费吗?为什么? - 知乎@喵字馆
Notion Like 笔记软件使用教程·学习资源汇总·知识管理方案:深度评测、辅助工具、信息管理、时间管理、任务管理、思维管理、项目管理、文件管理、笔记方法、记忆方法、写作方法 — 以 FlowUs - 知乎@数字花园的呓语

  • 💛Notion
    • 优点:①惊艳级舒适体验,数据视图美观与理性共色,页面关联层次与启发齐飞。②虽然无法导出其最强功能——好看的视图数据库(或许可以复刻),以及类双向连接的All-in-one的block关联(反向链接、第三方应用嵌入),但支持导出单个页面的html、md、pdf、csv格式。③定制化且实用的数据可视化,视频、日历、项目管理看板都有,可以像excel一样排序筛选。④实惠,个人免费版即高度满足需求。
    • 缺点:①无法一等一源码导出。②无离线功能,访问的稳定性(科学上网)、安全性(恶意攻击/万一跑路)存在忧虑。③动态网站,数据库庞大,加载慢挑战耐心
    • 适合知识管理与共享。
  • 语雀知识库
    • 适合有系统框架的内容的发布(文档、博客)。缺点:①PC端强大,移动端拉跨。②编辑器UI不够美观。

F. UGC 平台 (非独立 平台话事)

UGC 平台即内容分享平台,如油管、脸书、微信公众平台、知乎、豆瓣、微博、CSDN 等,在 网站排名 里可以看见简中主流 UGC 平台。

方案要求:无技术门槛,有运营思维即可。

  • 缺点:在这些公共平台上只能发表平台支持的内容,网页样式和域名的定制性、独特性很差,还有登录限制等等,主权在平台方手里。
  • 优点:同类内容聚合、互动人气与共享氛围。
  • 如果只是想有一个发布图文内容的地方而对定制功能或网页设计等方面没有更高要求,或者更希望在读者流量聚集的地方运营发展,那么 UGC 平台在当下最适合。一般都会提供现成的写作工具和数据分析工具,并帮你做好 SEO 优化。如果目的是做作品集、做商业品牌,那么从个性展示或长远发展的角度看,UGC 平台不太合适。

二、选择网站框架的考量因素

❗❗没有最好的框架,只有最适合的框架。决定上手某个框架之前要多参考使用者经验,了解它的搭建、运行与维护方式,评估这个框架和这个平台对于自己的需求和能力的合适度。

特别注意导入导出网站数据的功能是否有技术或费用的门槛,框架所用的前端或后端语言是否在个人能力范围内,框架所需的配置环境是否在硬件性能条件内。否则,一旦在搭建后期发现某个平台不符合自己的实际情况,就要转移数据库,而很多平台之间的导出导入都是有技术成本和时间成本的。

不过也不必犹豫不决,保险的做法是选择最多人在讨论的(不一定是最多人在用的)框架,方便交流并解决问题。

  • 网站主权
    • 独立网站:自有自定域名/服务器——定制性、品牌价值
    • 第三方平台:他有三级域名和数据库——被动性、操作简单
  • 理想网站的功能属性
    • 上手快(学习成本/技术门槛):UGC 平台<模板建站<动态网站<静态网站<半静态网站<自制框架
    • 动手空间大(扩展性/定制性/个性):自制框架>动态网站>半静态网站>静态网站>模板建站>UGC 平台
    • 运维精力少(稳定性/安全性/通用性):自制框架 (调试后)<UGC 平台<半静态网站<静态网站<动态网站<模板建站
    • 数据存储稳(数据主权):自制框架>静态网站 动态网站 半静态网站>UGC 平台 模板建站

动态网站静态网站半静态网站自制框架模板建站UGC 平台
价格¥几十起
(域名 + 服务器)
零起
(域名)
十起
(依赖于更新频率)
零起
(域名 + 服务器)
零起
(平台服务)
技术门槛⭐⭐⭐⭐⭐⭐⭐⭐⭐
运维精力⭐⭐视框架特性而定⭐⭐
数据存储数据库代码托管基于 git 的数据库自由决策平台决定平台决定
动手空间⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

(二)独立网站运行必要:环境搭建

一、静态网站的环境搭建

对静态网站的管理是对网站源代码进行操作,那么就需要首先搭建好代码运行的环境。一般来说,必须要安装好浏览器、Node.js、代码编辑器、代码运行程序。

1、搭建前端开发环境
  1. 安装JavaScript运行环境——浏览器与Node.js
    • JavaScript代码的执行需要JS解释器。每一款浏览器都会有JS引擎,因为JavaScript设计的初衷就是做交互与特效来补充HTML和CSS的不足。
    • 浏览器外要运行javascript代码,同样需要JS引擎,如IE的JScript、IE9以后的Chakra、Mozilla的SpiderMonkey、Chrome的v8、Safari的Nitro、KDE Konqueror的KJS、js之父用javascript写的Narcissus、用java语言写的Rhino等等。
      • Node.js对Google V8引擎进行了封装,使得JavaScript可以运行在服务器端。
  2. 安装nodejs的包管理和分发工具
  3. 安装代码编辑器

更多可能需要安装的工具,见 前端开发环境的安装、搭建及配置。选用的网站搭建方案不同,所需环境也不同,具体可参考选用方案相关的教程或帮助文档。

2、创建代码托管仓库

选择一个或多个代码托管平台,并注册账号,创建仓库用以存储网站源码或生成网页。

  • 适合个人:
    1. GitHub:微软收购 (美国立场,不排除对中国开发者限制的可能性)
    2. GitLab:从前有私库优势
      • GitHub 全球最流行,主打 开源项目的推广分享,适合想让更多人参与代码改进的项目(包括 Linux、node.js、JQuery、nginx 的开源项目),私有库同时协作工作者只能有三人。Web 端下载仓库(git clone)来研究学习,参与(fork)某个开源项目的改进并向仓库所有者申请合并(pull request),项目被 Star 可带来 offer。
      • GitHub Pages 是由 GitHub 中的 Repository(仓库/项目)直接创建的网页,用 Ruby on Rails 输出静态页面。在本地编辑 Repo 中的内容,上传部署到 GitHub 上,则 GitHub Page 也能够对应更新。👉GitHub Documentation
    3. Gogs:类 Github 的开源文件/代码管理系统。易部署,占用小,启动快,免费;托管/issue/wiki;相比 gitlab 无集成 CI、数据备份和恢复、API、各种插件。
    4. Gitee码云:开源中国旗下。工信部支持,本土受众语境。
      • Gitee Pages:国内访问友好,但自定义域名和自动部署收费。
    5. 备选同步托管,做国内访问的镜像
    6. CloudBase:腾讯云 云开发 服务,多需求一云化,静态托管目前按量计费。
    7. COS 对象存储:自行选购服务商的 COS 产品进行配置,相当于自费支持仓库。
  • 主打团队/企业:
    1. Coding腾讯云开发者平台
      主打小团队/企业协作开发私有项目,主推 Web IDE 的开发模式,企业版通过与腾讯云的合作提供免费及时部署调试的环境,综合了项目、任务、成员、文件、讨论的管理,Wiki 等功能。相比 GitHub 来说国内访问友好。 可免费创建 2 个私有仓库。缺点:服务不稳定。
      • Coding Pages:优势在于国内支持,劣势在于稳定性。

其他托管平台可参考 静态托管平台收集 - 知乎 或自行搜索更多选择。


(三)站点访问配置:域名

  • 访问 https://www.fgggh.cn 的过程:
    • 方式 A.输入域名,传递给 DNS(域名解析) 服务器,解析成 IP 地址,再访问站点。
    • 方式 B.输入 IP 地址,访问网站。

可见,程序要访问站点,就必须要拿到 IP 地址;但人们记忆一串无含义的数字的成本要大于一串有含义的字符,因此产生了域名,即英文字母形式的网址。

一、购买域名

购买一个域名,通常要考虑以下方面:域名安全,域名价格,实名认证,备案,域名管理(域名解析),域名转移。请移步 阿里云产品文档-域名注册 参考域名命名规则及注册建议的细则。(👉如何挖掘高质量域名?站长工具-百度权重排名查询-站长seo查询 - 爱站网

  • 一定要买域名吗?有没有免费的域名?
    • 如果选择用 Github Pages、Gitee Pages、Coding Pages 等能提供一个域名地址的平台来搭建(有的托管平台可能要对自定义域名服务收费),可以不专门去域名交易平台购买;
    • 如果想要一个简洁易记、有标志性的域名地址就去域名交易平台购买;多数其他建站方案都要自己买域名。
  • 想一个既符合网站性质,又简单易记的名字
  • 域名安全 - 如何保证我的域名访问正常?
  • 域名价格 - 怎么买域名最有性价比?
    • 域名一般按年付费、按根域名定价,细分为在某域名服务平台新注册域名的价格(有效期一般为一年,看付费时选择多少年的购买方案),到期续费的价格,以及从其他平台转入某平台的价格(一般含续费一年的价格)。
    • 注意把握各平台的新人优惠,这是唯一的最大优惠力度,建议在长驻平台购买最大年份。续费时,关注续费优惠与优惠时节(618 双 11 等)。可以在全网搜到各种最新优惠信息,这里的传送门不一定是最大优惠。(👉阿里云-域名特惠专场 阿里云产品文档-优惠口令
    • 选择哪个域名服务商? 各种域名后缀的价格在不同平台价格都不相同。以下给出几个主流域名服务平台的价格传送门:
    • 选择哪个域名后缀? 主要看个人需求与网站用途,正式、商用的选 .com.cn.net 等主流根域名,其他用途则随喜好挑选。

二、域名解析与备案

  • 是否一定要备案?
    • 必须——
      • 长期持有域名;
      • 使用 CDN、对象存储等国内云服务;
      • 接入大陆内地的服务器。
  • 域名解析服务器的选择?
    • 这里仅列出国内两大域名解析服务商。

(四)网站加速:云存储配置

一、图床

将几十 KB 到几 M 的图片/文件存放到专用仓库里,再在网页中使用一行专门用于显示图片的代码,即可不占用网站仓库库存并快速显示图片。

  • picGo,七牛云,腾讯云,iPic……

二、云服务器 或 虚拟主机空间

最贵,所以贫穷党好好决策。

1、阿里云服务器

(五)网站运行日常:输出文章

  • 模板建站/UGC 平台/动态网站:只需熟悉 word 的使用即可(会 markdown 语法的话更高效便捷),但需要联网保存/发布文章。
  • 静态网站/半静态网站:需要学会 markdown 语法与了解 HTML 标签(为什么用Markdown,而不用Word?可能是目前最全面的Markdown写作解决方案),可以离线保存文章;但发布文章、更新网站的流程更繁琐(可通过配置自动部署方案解决)。
    • 必须要用 md 格式撰写文章,必须要有支持 md 格式的文本编辑器。
    • 流程:撰写 markdown 文件并保存到网站文件夹→执行网站渲染并发布