Building a blog site is one of the most common ways for individuals to enter the Internet world. With the development of website technology, how to build a blog website has become very easy. Of course, you can quickly create a personal blog that relies on a large platform by choosing a large site such as Sina Blog, CSDN, blog Park, etc., but the disadvantage of this approach is that the speech is too limited and the underlying technology of the site is not accessible. So, if you want to be creative and have more control over your website, it’s best to build a website yourself.

Yu Li said. This paper links: www.yulisay.com/d/kdhmp.htm… Support wechat browser to open.

More wonderful articles, please move to fish stand said personal website. Welcome to enjoy and make fun of the shortcomings.

This topic will focus on the process of building a blog website, different blog building techniques and popular style themes. The whole series consists of the following three parts:

  • The current popular blog technology stack
  • Hexo and its popular stylistic themes
  • Hugo and his Popular Style Theme (More later)

Hexo is a fast, concise, and efficient blogging framework. Hexo uses Markdown (or other rendering engines) to parse articles and generate static web pages with beautiful themes in seconds. Its official website is hexo.io.

Install Hexo

Installing Hexo is fairly simple, but the following applications need to be installed first:

Node. Js > = 12.0 GitCopy the code

After installing Node.js and Git, install Hexo globally: NPM install Hexo -cli -g

Initialize a project named hexo-blog: hexo init hexo-blog, which generates the following hexo project directory:

.├ ─ _config.yml #.├ ─ package.json #.├ ─ public #.Flag #.flag #.flag #.Flag #.Flag #.Flag #.Flag #.Flag #.Flag #.Flag #.Flag #.Flag #.Flag Used to store the generated site files ├ ─ ─ scaffolds # template folder ├ ─ ─ source # resources folder, used to store content └ ─ ─ themes # theme folderCopy the code

Quickly manipulate Hexo

View the version: hexo Version or Hexo V

Start the service: Hexo Server or Hexo S

Create a new post like: hexo new “Hello hexo”

Generate static files: hexo generate or hexo G

Deployment site: hexo deploy or hexo D

Clean cache files (db.json) and generated static files (public) : hexo clean

After starting the service normally, open http://localhost:4000/ in your browser and you will see a default themed website, as shown below:

Popular Hexo theme

When using Hexo blogs, what we want most is to find a theme that is right for us. Here are some popular Hexo themes, illustrated and illustrated. In addition, regarding the writing method and Hexo theme modification, you can refer to the official Hexo documentation in the reference of this article, which will not be covered here.

Locate, install, and configure the Hexo theme

The best way to do this is to go to github.com/ and search for hexo theme. Or use a search engine and search for hexo theme site:github.com.

Then go to the project directory and download and install the theme we need (theme-demo is just a sample resource, please note that it is a real resource instead) :

git clone https://github.com/theme-demo.git themes/theme-demo
cp -r themes/theme-demo/_source/* source
Copy the code

If you want to use the downloaded theme, you also need to configure it in _config.yml:

theme: theme-demo
Copy the code

Next, use Hexo Clean to clear the cache and execute Hexo S to see the effect of the following Hexo style themes.

Hexo popular Theme # 1: Maupassant

Maupassant was originally designed and developed by Cho as a set of responsive templates for the Typecho platform. Maupassant is only 20KB in size and works well on devices of all sizes. Because its simple and atmospheric style is loved by many users, it has been transplanted to multiple platforms. Github address: github.com/tufu9441/ma… .

Hexo Popular Theme # 2: Matery

A Hexo blog theme that uses Material Design and responsive Design. Github address: github.com/blinkfox/he… .

Hexo Popular Theme # 3: Pure

Features are support for multiple languages; Third party comment box; Personal douban book list can be displayed; Can set up Alipay, wechat reward, etc. Github address: github.com/cofess/hexo… .

Hexo Popular Theme # 4: ILS

Interface design is very simple, refreshing, but fully functional, elegant, record life, display text. Github address: github.com/XPoet/hexo-… .

Hexo popular Theme # 5: Cafe

The Cafe theme aims to pursue simplicity, ease of operation and comfort of reading. Github address: github.com/giscafer/he… .

Hexo popular theme # 6: BlueLake

A simple, lightweight, responsive Hexo blog theme that looks a lot like a Sina blog. Github address: github.com/chaooo/hexo… .

Hexo Popular Theme # 7: Shana

Shana is based on the theme of Hexo 3.2 and was born to celebrate shana sauce’s coronation as the adorable king in 2016. Due to the large number of animation, low-capacity mobile phones may suffer from lag when accessing the mobile terminal. Github address: github.com/ShanaMaid/h… .

In addition to the above, there are many more great Hexo-style themes to choose from, such as Even, Next, Yilia, Hacker, etc. If you have good ideas and design, you can also create and publish your own Hexo theme, and you are welcome to leave a comment on my website.

Refer to the link

① Official Documentation of Hexo

② Hexo theme tutorial