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/kljqu.htm… Support wechat browser to open.


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 Style Themes (More later)
  • Hugo and his Popular Style Theme (More later)

One basic idea for quickly building a blog site is to generate static web Pages using Hexo, Hugo, etc., and then deploy these Pages to GitHub Pages, where subsequent static content updates need to be regenerated. Another traditional basic idea is to build Typecho, WordPress and other blog systems, which usually have two supporting systems at the front and back ends.

The following is a collection of several popular station technology modes:

Hexo + GitHub Pages

Hexo is based on the Node.js technology stack and is a great choice for front-end kids. Similar open source blogging platforms are Ghost built on Node.js. For Hexo basics and style topics, see the next article on this topic.

Generate Hexo static web pages

After installing the Hexo runtime and initializing the Hexo project, we need to configure Hexo globally and personalize your own blog, such as changing the configuration _config.yml to:

A walker | # Site title: my personal blog the subtitle: "' description:" have a personal website, as if had a small part of the Internet. 'Keywords: a traveler, author: a traveler Language: zh-cn timezone: 'Asia/Shanghai'...Copy the code

Then, after creating a few articles, executing the hexo G command will generate the static web pages we need to deploy in the public folder.

Deploy to Github Pages

You will need a GitHub account and create a repository of public type called <GitHub username >.github. IO. Take GitHub Repository as an example and configure the GitHub Settings of the repository as follows:

Then, push the resources in the public folder to the repository and wait for some time before they are accessible via the yulis-say.github. IO domain name.

A key deployment

For ease of use, you can also use Hexo’s one-click deployment feature. First, you need to install hexo-deployer-git:

npm install hexo-deployer-git –save

Then, add the following configuration to _config.yml (delete any that already exist) :

# Deployment
deploy:
  type: git
  repo: [email protected]:your-github/your-github.github.io.git
  branch: main
Copy the code

Run hexo Clean && Hexo deploy to push files and directories in the public directory to remote repositories and branches. Check whether the web page on your-github.github. IO is successfully deployed.

Hugo + GitHub Pages

Hugo is a fast and modern static site generator written in Go, which is a great choice for back-end kids. For Hugo basics and style topics, see the series of articles that follow this topic.

Generate Hugo static web page

After installing the Hugo runtime environment and initializing the Hugo project, we need to configure Hugo globally and personalize your own blog, such as changing config. Toml to:

Title = "a walker | my personal blog"...Copy the code

Then, after creating a few articles, executing the Hugo -t even command will generate the static web pages we need to deploy in the public folder.

Deploy to Github Pages

Deploy the same as Hexo, as described in the “Deploy to Github Pages” section.

Typecho, WordPress, etc

Typecho, WordPress and other blogging systems are more based on traditional HTML/CSS/JavaScript+PHP language development. Other similar systems include EmpireCMS, PHPCMS, DedeCms, Drupal, Z-Blog, etc.

Typecho quickly builds a site

Typecho is a lightweight PHP-based dynamic blogging framework that is easy to build on LNMP and has good performance and scalability.

As with most blogging programs, Typecho needs to be installed in sequence through the installation wizard. Upload the decompressed source code to the server web directory, and then use the browser to directly access the installation:

After the installation is complete, enter the background and change the login password as prompted. Visit the browser and you can see the effect. The following are the front and back systems of Typecho:

In addition, Typecho also has a number of excellent themes and plug-ins available. You can refer to this website: Typecho. Me /.

Quick WordPress site setup

WordPress is a blogging platform developed in PHP and can also be used as a content management system (CMS). Free and open source, licensed under the GNU General Public License.

Because WordPress has a long history, it has been used by many webmasters and enterprises for a long time, so the use of tutorials is also very rich, here is no longer wordy. It should be noted that the design of blog sites is mostly similar, so when using other technologies to build sites, you can learn from the design ideas of WordPress and its many excellent blog themes.

Refer to the link

① Deploy Hexo on GitHub Pages

② Configuring a publishing source for your GitHub Pages site

(3) Typecho official website

(4) the WordPress website