如果八方旅人有Mac版，那么此地将不存在于任何时空。

大家好，我是Tina。今年暑假的旅游计划被天灾和疫情扼杀在摇篮里了，学校又出于防疫考虑，暂时拒绝让我返校。
因此靠着家中极其有限的网络连接（还有我家附近的网吧——KFC和碰碰凉），年轻人第一次尝试搭建自己的网站。

其实很久以来，我都不太喜欢敲代码，逃避与计算机编程有关的内容。
但这次尝试搭建一些前端（？），尝到了很大的乐趣！
甚至乐不思八方旅人，乐不思ff14！

Content:

基本软件的安装以及Github配置
- 安装和学习Git
- 安装Node.js
- 安装Hexo
- 注册Github以及建立SSL key连接仓库
- 关于域名
- 安装PicGo并配置Github图床
使用Markdowm写文章并发布到网站
- 基本的Markdown语法
- 使用VS Code优雅地写markdown
基于Hexo主题NexT的个性化配置
- 未完待续。。。

基本软件的安装以及Github配置

安装和学习Git

这部分可以参考廖雪峰的教程。

我这里用的是MacBook Pro Catalina，似乎是自带了git，因此我直接开始了使用。

安装Node.js

去官网下载安装包进行安装。
检测node和npm是否安装成功，在命令行输入

1 2	node -v npm -v

显示版本号即为成功。

安装Hexo

推荐使用npm全局安装，在命令行输入

1	npm install -g hexo-cli

安装可能会花很久，我不知道具体花了多久因为开始执行上一条之后就去睡了，
睡醒发现装好了。

现在可以建立一个博客的文件夹，比如叫MyBlog，然后在命令行输入

1 2	cd 文件夹路径 hexo init blog

初始化你的博客。运行第二条之后会开始下载一些东西，
结束后你会发现MyBlog多了一个叫blog的有很多东西的文件夹！
这就是你的网页啦。
cd到这个文件夹里，新建一条博客叫test_blog：

1 2	cd blog hexo new test_blog

你会发现blog/source/_post/多了一个test_blog.md。
这个.md文件就是一篇博客啦。
然后运行

1 2	hexo g #generate，生成网站 hexo s #本地预览

分别是生成网页、生成预览。
此时会出现

1
2
3

INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

打开浏览器输入http://localhost:4000 就能看到刚刚生成的网页啦！

注册Github以及建立SSL key连接仓库

hexo s生成的只是本地预览，只能在自己的电脑看到。
为了能让大家访问你的网页，将之部署到Github上。

注册Github，建立仓库

使用邮箱在官网注册账户。新建一个叫用户名.github.io的仓库。
必须使用这个名字才能成功搭建网站。
基于Github搭建的网站的地址也将是用户名.github.io。

生成SSL key链接

为了连接Github上的远程仓库，需要SSH加密，确保你的仓库确实是你在上传。
因此需要一些设置，不过并不困难，可以参考廖雪峰教程的这一章节.

连接远程仓库

打开blog文件夹中的_config.yml文件（这个是你网站的配置文件），
找到deploy：，按下面填写

deploy: 
type: git
repo: git@github.com:用户名/用户名.github.io.git
branch: master

之后，我们输入（仍然在blog文件夹下）

1
2
3

hexo clean #清除缓存
hexo g
hexo d #deploy，部署到Github

然后再打开浏览器，这时输入用户名.github.io，就能看到你的网页了。

如果不幸显示404（比如我当时就是这样），不要慌！！
打开Github你的仓库，点击settings进入仓库的设置，从左边选择Page项，在Source下面的Branch下拉菜单选择master，再点save，然后再试一次。这时多半就能看到你的网页了。

如果还是不能，也不要慌！！！
可以再等等，因为我发现这中间还是有一定的延迟的。
等一两分钟应该就差不多了大概。

关于域名

如果仅仅将你的网页布置在Github，那你只能使用如上这一种域名。
如果你希望个性化定制，或者要一个漂亮的后缀如 .com，.shop等等，就需要去申请并购买。
比如可以试试在阿里云平台逛逛。

我觉得如果网站是自用或者没想好有什么除了记录以外的用途，可以就先凑合用 github.io.

安装PicGo并配置Github图床

使用在线图床，PicGo是非常方便的一个应用。用它上传图片、复制图片链接都超级方便。可以在这里下载，安装，非常容易。

图床我使用了Github仓库。因为国内访问十分慢，直接放Github的链接图片是加载不出来的。所以我使用了一个网上大家推荐的免费CDN，jsdelivr.实际不需要下载任何东西，配合PicGo使用时只需要在配置里改一下Github图床设置的自定义域名就好了。

具体操作如下：首先建立一个新的github仓库作为图床使用。注意设置成public。然后去PicGo里面填写图床的详细设置。

可以看到需要一个“token”，其他的地方都可以根据刚建立的仓库填写好。这个token需要到github去设置。登陆github点击头像，再点settings，在左边找到Developer settings，再在左边选择Personal acces tokens，选择generate a new token。

填写note、expiration然后勾选repo，最后拉到最下面点击创建的绿色按钮。

将得到的token复制到PicGo的设置，就完成啦。之后只要将需要放到博客里的图片拖到工具栏的PicGo小图标，就可以上传。点击图片就可以直接将链接复制到剪贴板。真的是超级方便！

使用Markdowm写文章并发布到网站

Markdow是非常方便编写的一种格式，我们可以直接编写markdown然后上传到网站。

基本的Markdown语法

Markdown的语法非常简单，可以参考这里。

使用VS Code优雅地写markdown

VS Code是一款我非常喜欢的编辑器，写什么都喜欢用它。对于markdown它也有对应的插件支持。

下载和安装VS Code都比较简单，就不提了。如果要实现优雅的markdown支持，就在左侧的extension里面安装Markdown Preview Enhanced，可以实现优美的实时预览以及其他一些小功能，具体可以看它的documentation。

Cameologist

互联网小屋的搭建与装修-好用的工具与踩过的坑汇总