After two days of torturing, I finally set up a successful blog 👏🧨. There were a lot of bumps in the road, but the end result was very satisfying, and the process was also worth sharing. Let’s briefly introduce my blog mainly using Jekyll + Github + Netlify + VSCode (used to write Markdown) framework to build, and then straight to the main course!
The straightforward “To connect”
Static Web site Generator
It’s 2020, of course, and setting up a blog is pretty simple. No complex framework, no need to buy a server, just generate static files into the CDN, high performance, low maintenance costs, and more security. Of course, if you want to build their own server of course can also, but the domestic environment I will not say, the record of all kinds of things will make you collapse, you can see before the company partner meng brother’s bitter history of the difficult road to apply for a domain name.
Let’s continue to talk about static website generator. The term has been around for a long time. If you are interested, you can listen to this episode of Kernel Panic. Most open source blogging software today uses this kind of technology, which is actually known as JAMStack.
JAMStack (JAM stands for JavaScript, API, and Markup) is a front-end architecture that uses Static Site Generators (SSG) technology and is not dependent on the Web Server.
At present, the popular framework for building blogs includes Jekyll, Hugo, Nuxt, Next and Gatsby. Why do I use Jekyll? I haven’t done much cross-referencing myself, mostly because I like The Ruby language (or rather the open source spirit/culture of the Ruby community). He had moved his blog back to Jekyll so he chose it without hesitation.
Data management and migration
In the past, many friends used WordPress to build a blog, both to the server, and to build a database, once the need to migrate the site is very painful, you may be a wave of SAO operation to write hard article data are deleted. But because we’re using JAMStack, there’s no database at all, and all articles have git commit records (unless you delete your Git project), so it’s unlikely to lose data. When migrating, simply Copy/Poast related article files.
Process automation
Since we used the static site generator, we need to run the build command (such as Jekyll build) to regenerate the static resources every time we write the text. Therefore, it is necessary to automate these repetitive processes, i.e., CI automated deployment. I use the free version of Netlify (300 builds is more than enough for my blog site, which is likely to get bigger every month), and the configuration is very simple: If your project is using Jekyll, Netlify will automatically recognize it and have the Build option configured for you by default.
We can also use Github Action to create CI. In this way, when we submit our blog directly to Github, the system will automatically generate static resources for us and deploy them to CDN.
Review system
Before, I saw many blogs using Disqus, although the integration is convenient, but the ads are loaded too much and slow. When I saw Utterances, an open source tool, I fell in love with it and gave up disqus decisively. Utterances is a comment tool based on GitHub Issues, with the following advantages:
- lightweight
- It loads very fast
- Configuration is simple
- This ✨✨ design style logo is very much to my taste
Static resource hosting
Because our website is hosted on CDN, the speed of access mainly depends on the speed of your hosted CDN service provider, so if we want to optimize the speed of domestic access, we need to choose domestic hosting service as far as possible (unfortunately, there seems to be no particularly good).
Specific you can refer to here: introduce some free static web hosting services
The last
The whole process is set up, then we just need to open the familiar VSCode to install markdown plug-in can be happy to blog.
Of course, if you want to further customize your blog site, as a programmer 👨💻, we can make some modifications based on some open source Theme, such as adding a sidebar, adding a bit of animation to the avatar, etc. (I also customized some of my own requirements on this Theme and submitted PR). In addition, we can also use some Serverless services, such as Google Cloud Function, to make up for the awkward situation that we do not have a back end. The specific needs depend on the talents of everyone.
Recommended resources: Jekyll Themes
For attention, please like 👍