Happy Birthday, 小朋友宝宝!

June 19, 2020 - 6 minutes read - 2832 words

CW_CQ_2019

引言

亲爱的小朋友,

今天是你的生日，一个特殊的生日。过去的一段时间里，这个世界在持续动荡，我们的生活也发生了很大的变化。兜兜转转，我们画下一个圆，庆幸又回到熟悉和喜欢的生活。这一次没办法为你安排一个丰富的生日，于是换一个方式为你庆祝。你有那么多精彩的故事，我就试着为你牵一根引线，后面的焰火由你自己来点燃。

你看到的是一个博客的骨架，为你申请的域名也终于派上了用场。添加新的内容非常直接，我下面会尽量简洁地介绍。对于更多功能外观等等的添加和调整，涉及多个工具和一些琐碎的工作。我这里只给出一些参考资料，留给你慢慢的去试验和完善。

生日快乐🎂！爱你的DS。

工作流程

一句话概括，如果要发布新的内容，你只需要在本地创建一个Markdown文件，按一定的格式完成写作，然后运行几行简单固定的Git命令。这样就会把新文件推送到云端，自动编译后生成网站，而你的域名（chelseaw.info）也被设置好指向这个站点。

进入Ubuntu Subsystem的文件夹\\wsl$\Ubuntu\home\chelw\work。然后在文件夹/cwblog/content/post/创建文件以.md为后缀名。例如这篇文章 2020-06-20-getting-started.md.
在这个文件中写下你精彩的内容。这里需要熟悉两个重要的部分（我会在随后展开）。
- front-matter定义几个重要的变量来帮助网站的编译。
- markdown的常用文法来完成正文写作。
当完成内容的编辑后，打开Ubuntu命令行界面，然后运行下面的命令。
```
cd ~/work/cwblog/
git add . 
git commit -am "***" // *** 代表一句简短的对这次编辑的描述
git push
```
为了便捷，我会写好一个脚本。到时候你只需要在命令行输入 ./hugopush.sh "***" 就可以了。
这样就大功告成了。喝杯咖啡，休息休息。

关于`front-matter`

如果你打开这篇文章的源文件，你会看到开头有下面一堆内容。这叫做front-matter，用于为网站生成设置参数。

---
title: "Happy Birthday, 小朋友宝宝!"
date: 2020-06-19
draft: false
slug: "getting-started"
toc: true 
show_reading_time: true 
tags: ["intro", "love"]
---

大多数应该是不言自明，这里只简单说明一下。

title: 你可以设置文章的标题。默认会使用你的文件名。
date: 发布日期。你可以在最后完成时再设定。
draft: 在完成终稿前，设置为True，避免不小心发表了未完成的内容。
slug: 可以用来自定义这篇文章的地址。推荐选一个简单的词来描述正文。最终文章地址会在https://chelseaw.info/year/month/slug/。
toc: table of content.
show_reading_time: 文章开头会给出字数统计和估算的阅读时间。
tags: 添加标签，方便文章的归类。

这些常用项基本满足大多数需求。如果想了解更多的可选项，可以参看这里。

十分钟学会Markdown

Markdown 是一个标记语言。它使用一些简单的记号和格式，在尽量不破坏自然语言的情况下，完成文字的排版设计。学习Markdown很简单，很快浏览下面几个资源就足够了。

MdEditor。读完这个默认页的文档，就可以完成大多数的编辑任务。
Cheatsheet。需要时来查一查，随用随取。

那么需要用什么编辑器来编辑Markdown文件呢？我推荐如下选项。

CMD Markdown。在线编辑，左右分栏可以同步预览。注册后可以导出文件到自己电脑上。
Typora。一个轻量级界面简洁的编辑器。优点是同步将Markdown的语句编译，所以你马上看到排版后的样子。缺点也是同样，如果要修改，可能需要重新编写Markdown的标记。
VS Code。微软出品，却出人意料的简单大方不累赘。我在你的电脑配置好了Typora和VS Code，可以马上使用。

命令行简介

我已经在你的Windows系统里装好了Ubuntu这个Linux系统。这个网站的内容也都放在了这个文件系统下。我们唯一需要的就是在它的命令行里运行上述简单的命令。按下Windows键，输入Ubuntu，就可以打开了。感兴趣可以阅读更多的内容。你也可以直接在Windows file explorer地址栏打入\\wsl$\Ubuntu\home\chelw来访问这些文件。

个性设置 Customization

以上这些，应该可以满足基本的博客需求。当然，小朋友肯定有很多自己的想法，如何去设计自己的界面。这就需要了解这套系统内部的一些原理和构造，然后按自己的意愿去天马行空地改造扩展。

最核心的工具是叫做Hugo的静态网页生成器。它利用一套模板语言，代替了手动编写HTML的痛苦。通过本地设计好一些模板，然后就可以只关心用Markdown添加真正的内容。而这些模板，可以通过对很多现成的主题（Themes）进行微调来实现。然后，Hugo会编译生成一个静态网站。比如你可以在命令行运行下面的命令，然后就可以在本地浏览器输入localhost:1313来预览整个网站。

> hugo server

目前为止，所有内容都还在本地计算机。常规的做法需要把生成的网站手动加载到一个HTML服务器。我们选择了一个“半自动”的方法。首先我们不在本地编译网站，而是直接将所有内容托管在云端Github。然我我们授权另一个叫做Netlify的服务。它会在线读取GitHub里的内容，运行Hugo的编译程序，然后将生成的网站发布。这些都是在背后默默发生，我们只需要在一开始配置好域名的定向，之后只要发布新内容到 Github就可以了。那么估计你也猜到了，之前 git ...相关的命令，就是讲本地的文件与云端同步。

下面这些资源可以帮助了解这套系统更多的内容。

Quick start。
Video tutorial Youtube。

常用设置

Hugo的核心设置包含在config.toml这个文件里。

title = "食与路"
description = "Eat and hike."
baseURL = "https://chelseaw.info"
languageCode = "en-us"
theme = "ananke"
. . .

这些设置会作为参数，根据使用的主题而决定网页的内容和样式。目前的网站使用了 Ananke这套主题。这里列几个最直观的配置。

favicon。注意看浏览器每个标签页的左侧，有一个小小的图标叫做favicon。现在我暂用了一个简单的“食”字。你可以来这里设计你中意的。然后只需要把图片放在/Static/images/文件夹，然后修改config.toml里下面一行内容。

favicon = "/images/..."

logo。看到坐着香蕉的猫么？这是目前的logo。类似的，你可以制作自己喜欢的图片，修改下一行来修改它。这个小工具可以一试。

site_logo = "/images/logo_..."

featured picture。每个页面可以设置一个顶部的背景图片。默认图片是在config.toml里设置。

featured_image = "/images/..."

social media。在config.toml中，你可以看到很多社交平台的信息暂时都是空的。目前只设置了Twitter和Linkedin。你慢慢添加，增加推广渠道。

另外一些你马上可以补充的内容包括有：

about: 编辑/content/about/_index.md，介绍一下自己和这个网站。
articles: 编辑/content/post/_index.md，介绍一下文章列表。

小结

感觉已经塞进去太多的内容。小朋友大可放心，实际操作比这里的描述要简单很多。我回头会把相关的账号分享给你，你可以更直接得去配置。

我已经迫不及待想要看到小朋友的创作了！

❤️❤️❤️

p.s. 另外我也在edX上帮小朋友注册了几个基础的计算机课程。我们一起来学习吧！

引言