My new JamStack-based blog
This article was last updated on: February 7, 2024 pm
overview
On a whim today, I’ll introduce my new blog site – https://e-whisper.com。
I am doing basic platform PaaS operation and maintenance and architecture, I like to write down and take notes about the new knowledge I learned at work, and suddenly one day I hold the concept of “resource sharing, the world is public”, share my learning experience, and also make my articles more standardized.
I started tossing and turning my blog in 2019, and then in 2021 I made a new version of my blog, and in the latest version of the blog, both used and deployed, it used JamStack’s technical architecture and tools. So far, the effect is also good.
🧠Issue:
What exactly is the Jamstack of the current fire in the “translation”? 》
My first generation of bloggers
The first generation of websites, which are still left here - https://www.e-whisper.com composed Pelican static site generator,NGINX Web Server，Docker ，Tencent Cloud Cloud host provides support. The theme is currently fromSmashing Magazine。
The effect is shown in the following figure:
📚Resources:
Pelican is a static site generator written in Python. Highlights include:
- Write content directly in reStructuredText or Markdown format editors
- Contains a simple CLI tool to (re)build your site
- Easy to interface with distributed version control systems and web hooks
- Fully static output is easy to host anywhere
Second generation - JamStack-based blog
Second Generation Website —— https://e-whisper.com composed Hexo static site generator,Qiniu Cloud - Object storage and CDN Provide image storage and URL,Tencent Cloud CloudBase - Static website hosting Provide static website hosting support,valine or Twikoo Provide comment system technical support, blog visits and comment information storage LeanCloud or Tencent Cloud CloudBase - User Management, statistical analysis passedBaidu statistics and LeanCloud To achieve, the blog homepage dynamic poetry display byIn a word, the Developer CenterInterface provided. The theme is currently from hexo-theme-fluid。
The effect is shown in the following figure:
Let’s introduce them one by one.
JAM
What is JamStack?
📚Resources:
JAM in Jamstack architecture refers to client-side JavaScript, reusable back-end APIs, and user interface markup, such as HTML and CSS.
The key feature of Jamstack is a clear distinction between front-end web UI and API-based back-end services. Unlike vertically integrated traditional web applications, Jamstack applications are modular and decentralized: the UI can be distributed through static web servers, CDNs, and even blockchain-based storage; Backend API services can be deployed on the cloud or served by edge nodes nearby.
Let’s start with the JAM architecture
JAM - Technical architecture for my blog
J - JavaScript
J stands for client-side JavaScript, so the main JavaScript involved in my blog is as follows:
-
JS static site generator framework: Hexo, I wrote articles in Markdown format on my computer, passed
hexo gGenerate static pages of the website and pass themhexo deployDeploy. -
Deploy hosting：Tencent Cloud CloudBase, here is where it is used:
- CloudBase CLI: Used for and
hexo deployWork together to publish website files to Tencent Cloud (static parts are specifically used: DNSPod, COS and CDN) - In addition to the JavaScript part, there are also sections that cover APIs (more on this later):
- User management
- database
- SCF
- CloudBase CLI: Used for and
-
Static website comment system：Twikoo, here it uses its JS front-end and Tencent Cloud CloudBase-based SCF background.
-
Web page visit statistics：
- Baidu statistics: Used to do webmaster web visit statistics and analysis.
- LeanCloud: For PV UV display. Its “data storage” service is mainly used here.
Baidu’s statistical effect is as follows:
The LeanCloud display effect is as follows:
The back-end storage data looks like this:
📚Resources:
-
Hexo is a fast, concise, and efficient blogging framework. Hexo uses Markdown(or other rendering engines) parse the article and in seconds, generate static web pages with beautiful themes. Hexo is based on JavaScript and Node .js.
-
Tencent Cloud CloudBase: Cloud Development (Tencent CloudBase, TCB) is a cloud-native integrated development environment and tool platform provided by Tencent Cloud, which provides developers with high-availability and automatically elastically scaled back-end cloud services, including serverless capabilities such as computing, storage, and hosting, which can be used to develop multiple terminal applications (mini programs, official accounts, web applications, Flutter clients, etc.) in the cloud. It helps developers build and manage back-end services and cloud resources in a unified manner, avoiding cumbersome server construction and O&M in the application development process, allowing developers to focus on the implementation of business logic, with lower development thresholds and higher efficiency.
- CloudBase CLI is an open source command-line interface interactive tool for cloud development (Tencent CloudBase (TCB), based on JavaScript and Node .js, used to help users quickly and conveniently deploy projects and manage cloud development resources.
-
Twikoo: A concise, secure and free static website review system, based on Tencent Cloud development. Some of the features are as follows:
- Support reply, like
- No additional adaptation is required, and it can be used with light theme and dark theme
- API calls are supported to obtain the number of article comments and the latest comments in batches
- When visitors enter the QQ number in the nickname column, the QQ nickname and QQ email address will be automatically completed
- Visitors fill in the digital QQ email address, and will use the QQ avatar as the comment avatar
- Support pasting pictures in the comment box (can be disabled)
- Support for inserting pictures (can be disabled)
- Support for inserting emoticons (can be disabled)
- Support Ctrl + Enter quick replies
- The comment box content saves the draft in real time, and the refresh is not lost
- Supports code highlighting by language
- Privacy information security (sensitive fields (email, IP, environment configuration, etc.) are not leaked through SCF)
- Support for human review mode
- Prevents XSS injection
- Support for limiting the maximum number of comments per IP per 10 minutes
- Support for custom emoticon lists
- Embedded admin panel, login with password, easy to view comments, hide comments, delete comments, modify configurations
- Support for importing comments from Valine, Artalk, Disqus
The effect is as follows:
-
LeanCloud: The services provided by LeanCloud are essentially the same as Tencent Cloud’s CloudBase. LeanCloud’s leading serverless cloud service provides strong back-end support for product development. Provide one-stop back-end services, such as data storage, cloud engine, instant messaging, etc.
A - API
A refers to reusable backend APIs. In fact, J and A are closely coordinated, and we can see in the previous paragraph that many JavaScripts eventually call APIs to add, delete, modify, and check data. The main APIs covered in my blog are:
Static website comment API
If you visit my website –Best Practices for Production on Containerized Application Systems - Dongfeng Weiming Technology Blog (e-whisper.com), look at the comments, open the browser’s F12, you can see that the API of the actual Twikoo POST is:
1 | |
The response returned by the API is:
1 | |
The actual content is:
Web page access statistics API
Baidu statistics are too complicated, I don’t understand much, the URL is:https://hm.baidu.com/hm.js Readers can see for themselves.
The LeanCloud APIs for counting PV, UV, and specific article views are:
PV:
https://lrbbjugq.lc-cn-e1-shared.com/1.1/classes/Counter?where={"target"%3A"site-pv"}
The response reads:
1 | |
UV:
https://lrbbjugq.lc-cn-e1-shared.com/1.1/classes/Counter?where={"target"%3A"site-uv"}
The response reads:
1 | |
Specific article reads: toBest Practices for Production on Containerized Application Systems - Dongfeng Weiming Technology Blog (e-whisper.com)for example
https://lrbbjugq.lc-cn-e1-shared.com/1.1/classes/Counter?where={"target"%3A"%2Fposts%2F14417%2F"}
The response reads:
1 | |
Home Slogan
If you enter my homepage and refresh it a few times, you will find that different ancient verses will appear on the Slogan on the homepage. As follows:
This is actually the API called, and the dynamic poetry display on the homepage of the blog is made byIn a word, the Developer CenterInterface provided.
📚Resources:
Yiyan is a project created in 2016 and originally used for personal purposes. At present, it has been transformed into a public welfare project, operated by the Mengchuang team to provide services for everyone. The so-called 一言 (ヒトコト), that is, a sentence. This sentence can convey moving, can be a smile, can be thought-provoking. In short, a word represents the touch of words, the communication of souls.
The specific call URL is:https://v1.hitokoto.cn/?c=i。c=i Indicates that the sentence type © is poetry (i).
The response returned is:
1 | |
M - Markup
M refers to the markup of user interfaces, such as HTML and CSS.
My blog compared several popular Hexo themes and finally chosen fluid 。 Here are the themes I’ve used and my brief reviews.
- NexT: Most used by people, updated frequently, Chinese, no Chinese documentation
- icarus: The theme is to my taste, updated frequently, no Chinese documentation
- matery: Fancy, Chinese fully supported
- fluid: Concise, full Chinese
- butterfly:Chinese Traditional
📚Resources:
Fluid is a Material Design-style theme based on Hexo, with a minimalist design that helps you focus on writing, by Fluid-devResponsible for development and maintenance.
Topic GitHub: https://github.com/fluid-dev/hexo-theme-fluid
Preview a site:Fluid’s blog，zkqiang’s blog
You can browse it Hello Fluid - Hexo Theme Fluid (fluid-dev.com) to experience the style of the theme
JAM - My Blog Writing Publishing Process
First, articles are all hosted on Git. Install the dependencies on my computer: Git, Node.js, VSCode (used as Markdown format article writing, terminal terminal, and Git version management),hexo-cli(Hexo’s command line),hexo-theme-fluid(fluid theme) and @cloudbase/cli(Tencent Cloud CloudBase CLI).
Second, execute it in the terminal hexo new " 新文章 " Create a new markdown file and write and edit it with VSCode.
After the article is completed, it is executed through the terminal hexo s Generate a new article page and preview it locally.
Finally, pass cloudbase framework deploy ... Publish to Tencent Cloud.
I’ll talk about it in detail here cloudbase framework deploy ... What have been done, as follows:
1 | |
In the meantime, version management and synchronization of articles are also carried out through Git.
JAM - Deployment architecture for my blog
The common user access routes for JAM are as follows:
Static site section
The site produced by Hexo is a completely static site, all static files, including: HTML, CSS, JavaScript, and images. These static files, through cloudbase framework deploy ... , publish toTencent Cloud CloudBase - Static website hosting。 In fact, static files are published to 2 Tencent Cloud products:
- Tencent Cloud Object Storage COS: Static files are stored in COS as objects.
- Tencent Cloud CDN: Static files in COS are cached in Tencent Cloud’s CDN.
When a user browses the site, the process is as follows:
- Visit:https://e-whisper.com;
- <e-whisper.com> domain name resolves to CName:<e-whisper.com.cdn.dnsv1.com> in DNS; Go to Tencent Cloud CDN
- If the CDN hits, return directly; If the CDN does not hit, it will return to the address of Tencent Cloud COS to access the source file.
API section
For the API part, the following components need to be provisioned, installed and deployed:
- Static website comment system:Twikoo, see for deployment methods Twikoo is quick to get started
- Web page access statistics API：LeanCloud。 LeanCloud only needs to apply for an account and get the corresponding domain name and AKSK.
summary
That’s it for my JamStack-based blog — https://e-whisper.com。 Mainly based on: Hexo, Fluid theme, Twikoo review system, LeanCloud, and Tencent Cloud CloudBase.
From my perspective, some of the main differences between JamStack and traditional LNMP development include:
- Jamstack does not require installing or managing an operating system (such as Linux)
- Jamstack does not require administrative security policies (server firewalls)
- Jamstack does not require installing or managing application databases such as MySQL
- Jamstack can deploy a web site or web app without using an HTTP (web) server, such as Apache
Overall, there are 4 main benefits of choosing to use Jamstack to create a website: Cost effectiveness, performance improvements, better security, and a better user/developer experience 。
Welcome to experience! ✨✨✨