文章目录
本文为专栏内容整合版，前期由分段形式发布，过程可参见本专栏序号标识
序言
偶然间，看到某乎上高赞的一个问题：怎么证明下计算机专业学生的能力？问题下面呢，也是有众多网友评论哈，我记得最清晰、也最现实的一条是：有什么能力的，为了装个 X 罢了
看到这个我就不得不站出来说一句了，证明能力的方式也不是只有建网站这一种方式是吧，那毕竟还是“术业有专攻”呢，对吧。也不知道为什么锻炼下自己的实操能力，拓宽下学识就成了键盘侠下的装 X，咱也喷不过，求饶求饶啊
好了，回归正题，我建立个人网站呢，初衷其实非常简单，说不定你也想过，只是没去做而已。我是想：现在的网络中有好多的写作平台，比如我现在在用的C站，它已经非常成熟，社区讨论、问题发布、Blink动态等等，一应俱全。我在学完相关知识后，为什么不能自己写一个呢？也许更多的是我爱折腾罢了，哈哈
最开始接触是在C站文章发布“板块自定义”模块中，输入几行代码，就能有漂亮的界面。当时因为还没有接触到CSS、Web前端这些，是从网上白嫖来的，更是激起了我深入学习的兴趣
什么是博客，博客是大家分享、交流的一个平台，我们可以从中吸取别人的经验，提升自己。对于看博客的人来说是这样，对于写博客的博主呢，更是对自己所学的总结，能理清自己的思路，便于日后复盘，养成良好的习惯。技术博客，能记录我们遇到的问题，更好的Bug处理方案，在我们日后开发的过程中遇到同样的问题，记忆会更加深刻
有了想法就要动手，当我真正动手去实现的时候，才发现并不是一些标题党发的文章，像“十分钟建立属于你的网站、你还不会自己建网站？”。等到自己真正看着他们的视频、文章去操作的时候，有的是真大神，他默认的一些东西你应该是会的，会写的简单一些。还有一些，就是“伟大的搬运工”了，完完全全就是发布了别人的文章，还不放原文链接那种
正是我没有发现一套完整的，能帮助新手开发一个网站的资源，所以决定写下 UP 建站的过程，分享我从初学到最后实现的一些经验。所以，如果你也想要拥有一个属于自己的网站，可以跟着上手操作下，过程中如果遇到问题可以私信或留言。下面，让我们一起开始吧
思考下，我们查资料用的最多的是什么？有些朋友就会说了：那还用问，必须是“在B站上大学“啦，亦或是搜索引擎了。没错，我想这正是我们大多数人学习新东西、不断探索向前时使用最多的工具了。那，我们搜些什么呢？比如，你可以这样：
或许，你还可以这样：
的确能搜到很多的视频、文章。但是在这部分，我以我是初学者的角度来描述下我的心路历程：因为这东西目前在我的脑子里就是一个初步的想法，我还不知道怎么去实现它。就像是一个人在山里迷路了，我只知道要出去，可我找不到路啊
这一 pa，我们就来聊一些建站，我应该准备什么。网上大多数教程啊，都是一个大长篇，鼠标滑好几下都不带滑完的那种。会给刚入门的朋友一种：”哇，好难啊，这么多东西啊“的感觉，所以这里我对各部分的内容进行了分类，你只要按照顺序，一步步往下走就好啦
本地网站
这里为什么要强调是”本地“呢，一开始啊，我也是看的教程，跟着别人的思路来走，像什么先买个域名，买台服务器啥的，我都踩过坑。这对刚入门的朋友在购买或者选择上会造成困难，我们莫不如换一种思考方式，现在我自己的电脑上建立一个网站，然后在”发送“出去，让别人都能看到。你看，这不就很明确了吗？
在自己的电脑上实现网站，必须的两个东西浏览器、开发工具，前者大家肯定是都有了，不做赘述（不然你拿什么看到的我这篇文章呢，嘿嘿），我们重点介绍后者
开发工具
WebStorm
WebStorm 是JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能
废话少说，来这里下载 传送门
这儿呢，有个小问题，这玩意是收费的，如果你是一名大学生，可以通过学生认证免费申请到教育账号，如果……（不多说奥，自己去问度娘，能找到方法），直接无脑下一步安装就行，不要慌
Vscode
Visual Studio Code（简称“VS Code” ）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（例如.NET和Unity）扩展的生态系统
这两个工具具体来说就是：前者是全家桶（啥都有，不用你管，直接用就行），后者是一个空壳公司，需要各种员工（插件）去实现一些功能。所以如果你懒得去配置了，就直接下第一个，第二个可能在写博客Markdown语法上更方便一些，这个我后面会说到。此处如果你是新手，我建议你下WebStorm，后文的一些配置上，会更加方便
框架
“框架”这是啥，懵了吧，嘿嘿。遇到事情不要慌，且听杰森娓娓道来。这里咱们看下某度词条的解释：
框架（framework）是一个框子——指其约束性，也是一个架子——指其支撑性。是一个基本概念上的结构，用于去解决或者处理复杂的问题
框架这个广泛的定义使用的十分流行，尤其在软件概念。框架也能用于机械结构
这东西相当于什么呢，比如咱们建房子，你说你怎么建？咱不能没有图纸、没有工人就开始吧，这不是“天方夜谭”嘛。首先肯定是需要设计师根据用户需求设计好这个图纸，然后工人再依据这张图纸开始建房子对吧。这里省略了很多，行业大咖求放过，举个栗子哈
我们搭建网站也一样如此，你真的以为那么多的网站，都是程序猿没日没夜一行一行从零开始写出来的吗？emmm，其实最开始对于这个问题，我的回答是：嗯，是的，那肯定得呀。直到我去实习的时候，才发现企业里的一些东西也并不是全部从零开始开发的。（开源大法好，哈哈哈）难道你想成为这样？
一个产品、项目、网站……只要是有前人做过的东西，我们都可以从中汲取经验啊，学习好的编码，开源的，别人已经实现的我们何必浪费时间再去搞一遍呢？尤其是下文要将的WordPress，简直就是“无脑式操作”，你可能都不知道自己做了什么，但一个属于你的网站就那么出来了
博客框架通俗的说就是别人写好的一套源码，你拿过来会用就行，改一改自己的配置啊，配上想要的主题啊，这种就足够了（大佬请绕路）。所以下面我会给大家分享一些在搭建我的个人网站时，了解到的一些框架，并简单分析，供大家选择
还是老话，此专栏受众对象是刚接触的朋友，所以一些复杂，不需要知道的参数我并不会提及，只涉及到最关键的部分，方便大家快速找到适合自己的那一个
提前声明，杰森用的框架是 Hexo ，各位可以和我选择不同，但配置不尽相同，同理可得的那种
Hexo（强烈推荐）
Hexo 是一个快速、简单且功能强大的博客框架。你用Markdown（或其他标记语言）写帖子，Hexo 会在几秒钟内生成带有漂亮主题的静态文件。>点我直达<
Hexo特性：
- 运行效果极佳，成本低
- 多平台：本地、云、PC、移动端通吃
- 支持多种CDN服务（开启可以提高网页的打卡速度）
- 各大搜索引擎对网站的收录及权重有较大优势（用户搜到你发布的内容可能性更大）
如果你喜欢配置，对代码操作后完成一定的配置，这款符合你胃口。放上配置截图供参考：
WordPress
WordPress是基于PHP和MySQL的免费开源内容管理系统（CMS）。 是全球使用最广泛的CMS软件，从最开始一款简单的博客系统，发展成为现在具有数千款插件，小工具和主题功能完整的CMS系统。>点我直达<
WordPress特性：
- 商用范围广
- 方便后续备份和转移，有自带的工具支持
- 扩展性强大（此处可联想Google的插件商城）
- 对自定义用户非常友好（绝对可以打造出你想要的）
如果你并不像看那些代码，可以用这款，WordPress自带后端管理，选择自己想要的主题，然后拖拽所需控件（比如你想实现显示时间这个功能，会有一个像手机端桌面小组件一样的东西，拖拽到想显示的位置即可实现）。另外最重要的是，使用它你需要先搞一台服务器
为了大家能更快速的找到合适的，我不会给大家很多的可选项，更不会告诉大家还有什么（不然你会觉得，我现在的可能不是最好的，我要尝试更多的。倘若这样的话，不知不觉间你就会浪费很多时间，莫不如跟着一个先搭建下来，等日后熟悉了，再更换其他的。）等到自己独立上手时，也能有个清晰的思路，不至于在某一点上花太多时间
本地环境
这一块呢，不用过多的介绍，可以理解为我们建房子需要水泥、铲子等工具和原料一样，本地的环境就是我们用到的铲子，是工具。而Hexo的博客框架就是水泥这样的原材料，我们需要用工具才开始干活，不然你***用手干啊……
git
简单描述下它用来做什么，Look Here：
Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。Git 与常用的版本控制工具 CVS, Subversion 等不同，它采用了分布式版本库的方式，不必服务器端软件支持
不必理会上面你从未听过的词汇，这么来。某度网盘用过吧，是不是有个自动备份，你选中本地的某个文件夹，当本地文件发生改变时，只要软件在后台运行，是不是云上也会和本地自动保持一致。过程就是这么个情况，但是git的操作目前你就可以相像成一个云，用一些命令你就可以把本地的代码“发送/备份”到云上
我并未深入展开讲git的分布式特性，命令等内容，这里推荐入门的朋友可以>看这里<的教程，方便快速入门
既然要使用Git，那么我们首先就要安装并配置Git的环境，点击这里下载（Windows操作系统），点击Download按钮即可
安装过程不再赘述，直接使用默认配置，一“Next(站)” 到底
下面我们配置环境变量信息，详情参考此处，打开 Path 变量后，添加本地环境安装目录（确保文件位置到达 cmd ）
安装完成后，你可能没有看到桌面的快捷方式，不要着急。我们在Windows搜索框中搜索Git就可以看到这样几个图标
可以直接点击 Git Bash 或者在桌面任意位置右键，打开 Git Bash Here 就可以使用啦
node.js
很多朋友纠结这两个版本，看下这个解释相信就知道需要哪个了，杰森用的是LTS版本
LTS代表“Long Term Support（长期支持）”，Current代表“当前的”
Current就代表最新发布的版本（每6个月一次的），它可能是奇数版本也可能是偶数版本
Hexo
安装
桌面右击，打开git bash here输入命令安装（默认位置即可，方面后续配置，不建议修改）
npm install -g hexo-cli
这里我已经装过了，可能显示的和你的不一样，执行完后关闭窗口就行，此时本地已经有了hexo的环境。怎么样，是不是很简单呢？
初始化
在你本地任意位置（但要记住路径）方便起见建议直接在除C盘的任意盘符下的跟目录新建，命名任意，比如我这里是在D盘新建的 hexo-jason-blog 文件夹，可以参考下
本来我想用自己已经搭好的本地环境给大家演示，但是为了能真实体现“新手”的操作环境，杰森决定重新建立，一步步重新操作，只为大家能走好每一步，直到成功
在该文件夹下打开 git bash here 输入命令
hexo init
此时你可能会遇到这个错误，不要慌张，是从GitHub克隆时网络原因，多试几次就好
关于此类问题的解决方案请>参考这里<
成功效果：
根文件目录下多了这些文件
简单介绍下hexo的文件结构：
- public 最终所见网页的所有内容
- node_modules 插件以及hexo所需node.js模块
- _config.yml 站点配置文件，设定一些公开信息等
- package.json 应用程序信息，配置hexo运行所需js包
- scaffolds 模板文件夹，新建文章，会默认包含对应模板内容
- themes 存放主题文件，hexo根据主题生成静态网页（速度贼快）
- source 用于存放用户资源（除 posts 文件夹，其余命名方式为 “ + 文件名”的文件被忽略）
我们日常写文的操作都在 source/_post下，既然我们已经有了建房子时“和泥”的工具——WebStorm，为什么不用呢？
在WebStorm中打开根目录 hexo-jason-blog （直接将该文件拽到桌面WebStorm的快捷方式打开就行），打开终端并输入命令
hexo s
点击链接 http://localhost:4000（图中黄色下划线位置）进行本地预览，默认是hexo内置的landscape 主题
光标停留在 Terminal 位置，组合键Ctrl+C停止本地预览，这就是本地最简单的一个网站啦
emmm，默认的页面朋友们也预览成功了，大概呢，就是这样，嘿：
但总感觉，还是差了点什么东西。没有一些博客、网站该有的东西，那怎么能让它更像一个网站呢？
主题
这里我们介绍下主题和框架，我们现在使用的Hexo是一款快速、简单的博客框架，主题就是开发者根据此框架开发的功能更加完备、页面样式、栏目更多的一种”配件“。就像你用的手机，换上手机壳，选手机壳时需要匹配自己手机的型号，不然也不配套啊是吧
再举个“栗子”，像Android手机（IOS闭源，除非越狱），厂家生产时默认的桌面主题，在主题商店这个app里你能根据自己的喜好选择更好看的图标、背景、字体。就像是“换上新衣”，可以从这个角度理解我们下面要做的操作
样式
提及主题，肯定就会有很多啦。还是那句话，大家根据自己的喜好选择就好，这里是官方主题库，我比较喜欢Butterfly这款主题，下面带大家给自己的网站“换新衣”
Butterfly
先给大家看下主题的页面
博客主页
博文页面
从主题的文档中看，作者也是一直在维护的，时间很近。正所谓好的产品必须要有好的文档嘛，作者也是相当用心，大家可以跟着文档一步一步配置，非常简单，只是把一些工具组成链条罢了
应用
- Terminal 输入命令
git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly
等待安装完成，themes文件夹下显示了butterfly主题的一些文件
- 安装插件
安装 pug 以及 stylus 的渲染器，如果没有安装，预览界面是这样的
控制台输入命令，回车等待安装即可
npm install hexo-renderer-pug hexo-renderer-stylus --save
- 修改配置文件
网站根目录下找到**_config.yml文件，修改主题为butterfly**（注意yml文件格式）
- 本地预览
hexo clean //执行此命令后继续下一条 hexo g //生成博客目录 hexo s //本地预览
效果图
可能看上去还是那么的“简陋”，额，这个问题呢，会涉及到后续的”主题美化“（其实就是加上了一些好看的图片而已，也很简单）。我的博客也没有优化的很细节，非常粗糙，时间有限，后面再说吧，可以看下，留个”念想“，相信你做的会比我更好
