JAMstack build Hexo + Netlify

Reprinted with attribution, peace~

Mugu’s Blog

First, what is JAMstack?

JAMstack is javascript + apis + makeup

Js processing dynamic display part; APIS are reusable APIS, such as cloud functions and third-party services. Makeup is a template for generating sites. In recent years, it has developed rapidly abroad.

In a word, enhanced static web sites.

The basic idea is to provide an easier and faster development experience; Because this model makes JamStack stand out among web site building solutions with lower cost, higher performance, and better scalability.

• Better performance: Distribute content such as static resources through CDN
• More security: No traditional Web server, no need to worry about common network attacks
• More convenient: directly hosted in the corresponding services, and very cheap or even free, such as Githubpage/Netlify, domestic Gitee and Tencent cloud have related services
• More separation: No need to be confined to traditional development systems, agile development deployment, real-time preview
• More scalability: Relying on THE CDN network, the network performance scalability is very good, there is no need to worry about the traditional server performance limitation and other problems.

Use skills

• CDN
• Atomic release: Each release is a standalone release
• Invalid cache. Once republished, the CDN will update the original resource
• Easy tracking of file changes through version system control, such as Git
• Automatic construction: When the website is published, webhook notifies sever to build it, server will build the project and update the CDN

Common build style

1. First developed locally, now static site generator SSG such as Hexo, Hugo, Getsby,Next, etc is used to generate static resources. I use Hexo to generate static web resources using Markdown documents as template input. 2. Version control systems such as Git are managed. Generally, these SSGS are integrated and published to remote repositories such as Github. These static resources can then be hosted on the appropriate service provider, where they can build and update the CDNS, usually from githubPage, Netlify, or from giteePage or from the Cloud at home.Copy the code

Of course, all of the above are static resources, so if there are some dynamic updates, you can implement dynamic calls through third-party apis and cloud functions.

Generally speaking, there are

• Cloud development: add custom cloud functions, such as Tencent Cloud development/Netlify Funciton /AWS; Cloud databases can be added to store user data, etc.
• Reviews: There are many related review services available, such as Valine/Twikoo/GitTalk, etc. Generally, some JAMstack products are provided
• Others: search services/forms services/statistical scripts/e-commerce.

Another extremely easy way to do content management and automated deployment is through a CMS. These are called headless CMS.

The CMS provides apis that the site builder can call to pull data and render dynamic data into static pages

This allows content creators to focus on the content and not spend a lot of effort on web builds.

Compared with the traditional type construction scheme

JAMstack applies to scenarios

• Lots of static content
• Such as wikis, blog sites, documents, e-commerce sites, corporate official websites and so on

Do not apply

• Lots of dynamically updated content
• Such as chat room, live video, forum, etc.

JAMstack build scenario for this blog

Bloggers have had a hard build history of Githupage –>giteePage–>Netfily.

Updated Hexo3.2.0 once –>Hexo5.4.0

And the theme version Fluid–>1.89.

This program is suitable for almost no cost/visit general phase use, allWhite piao XD

The current build scheme in use is:

1. SSG framework: Hexo5.4.0
2. Version control: Git, Github
3. Free hosting service: Netlify
4. Free third-party apis and public CDN: JsDeliVR, Leancloud

Integrate some of Jsdelivr’s public CDNS in Hexo theme Fluid and provide a review interface for Leancloud, very nice!

Because it is a blog website, we don’t need many dynamic services, the most important is the comments and visit statistics, the configuration scheme of this piece is recommended to use The Valine review system based on Leancloud, PV statistics suggest to use no garlic, especially easy. And with the third party library can be to achieve email notification and other functions.

So the first step is to go to the Hexo documentation to build and deploy your site, and then choose Fluid or another theme for configuration.

1. Hexo

2. Hexo theme: Fluid

3. Valine has no back-end review system

4. Simple statistics

PS: Blog visits to date 🎉🎉

Hosting services using Netlify, too sweet ~. Before the use of githubPage hosting, figure a peace of mind, but the first screen to 11s, is simply the speed of ancient times 😂, decisively give up. From here on out, I tried hosting giteePage and found that the effect was similar to that of Netlify, with Gitee on the front and Netfily on the back:

GiteePage is faster than giteePage, which is, after all, a domestic hosting service. But the most painful thing is that it requires PRO to customize the domain name, can’t whouch, which is not in my geek spirit. GiteePage is a good choice if you don’t mind.

❌

✔

Go to Ali Cloud to buy a domain name (this 12 dollars a year 🤣), Netlify and githubPag and all support custom domain name binding, as long as to the corresponding provider where the DNS can be resolved.

Ali Cloud domain name registration

There is a pitfall that 🕳 will invalidate Leancloud’s PV and UV counts. And the email alert function also doesn’t work, very painful. Of course, this is a compromise under white piao. If you don’t want the WWW, you can solve it by paying money.

Set up valine email alerts

In addition, Netfily allows you to directly monitor github repository updates, which makes Hexo + Github + Netlify + Leancloud’s one-stop solution particularly nice.

Of course, you can also try to use other hosting services, here is only the personal use of bloggers to do share.

Netlify

giteePage

githubPage

Optimization scheme

The general optimization for JAMstack is CDN service optimization and file compression. And there are plenty of ready-made plug-ins that can be packaged before you build, which is pretty handy! After testing, the loading speed is nearly twice as fast after optimization.

Here are the optimizations for the latest version of Fluid:

• The compressed image

  • Compression features built into Fluid can be used
  • Using hexo – all – minifier
  • Use a third party such as TinyPing to compress and upload.

• Compressed generated file

  Front-end static files and images generated by hexo-all-minifier compression

  npm install hexo-all-minifier
  
  ### set in blog _config.yml
  all-minifier: true
  Copy the code

  Where custom start concator:

  • Js_concator merges the generated JS, packages it into a script file and puts it at the end of the page to reduce the number of requests and avoid blocking
  • Bug: Using js_concator packaging makes the comment plugin unavailable, probably because the APIs conflict with it.

• Use the CDN service

  Hexo-fluid uses the jsDelivr service by default, configuring common CDN with commonly used third-party libraries

  • You can also use staticfile\bootcdn
  • You can buy a private CDN for acceleration, CDN

I used to do WordPress, which was too oppressive, always had to install various plug-ins, a poor server often crashed, no money to buy security had to withstand web attacks, speed is not good. With simple configuration and load optimization, you can use the same experience as the expensive configuration sites of the past, which is beautiful.

So for blogging sites, JAMstack YES!

Core concept -CDN

A content delivery network (CDN) is a group of geographically dispersed servers that work together to provide rapid delivery of Internet content.

CDN allows the rapid transfer of assets needed to load Internet content, including HTML pages, javascript files, style sheets, images, and videos. The popularity of CDN services continues to grow. Today, most web traffic is served through THE CDN, including traffic from major sites like Facebook, Netflix and Amazon.

more