Teach you how to build your own website from scratch

Of course, this is essentially a beginner’s tutorial, maybe a little popular science feeling. I’ll give you an overview of the process of building a website and the techniques and steps involved (I’ll leave it at that if it’s too much anecdotal) and give you an idea of how it works. But I won’t go into details like how to sign up for an account or click next when you install. I hope after reading this article, before this knowledge of the little white, to the end can also build a site belonging to their own. (The prerequisite is to know basic English words and use search engines well)

Those who already have the foundation can skip or close.

Most of the comments are related supplementary notes, which have no impact on the normal process. If you are not interested, you can skip them.

All questions related to this article can be commented on GitHub Issues of this article, and other questions can be commented on the corresponding project or article.

I will try to keep up to date with the techniques and practices used in this article and will be open to errata.

It is recommended to download the long term support version rather than the current release (because if it is the latest version, it is prone to some wonderful bugs).

All are installed next by default.

Windows opens the command prompt, macOS opens the terminal. (= =, this will not please Baidu.) Close the TAB in the upper right corner for Linux users.

If the following commands are mentioned, the default is to open the terminal for input.

Type node –version. If you get the same version as the one you just installed, then Node.js has been successfully installed.

Visual Studio Code, VS Code for short. The most powerful editor yet, lightweight and fast. Note: This is not VS as we usually hear it. VS is Visual Studio, which is a powerful IDE (integrated Development Environment) and an order of magnitude larger than VS Code.

Before you do that, I recommend you install VS Code. Because when you install Git Bash, you can set VS Code as the default editor.

Git is an open source distributed version control system developed by Linus Torvalds (also the author of Linux) to manage Linux development. In short, it is a version management tool. For example, when the designer designs the third version of the poster and the client says he wants the first version, he can quickly go back to the original version through Git. Instead of having to save a zip file for each version, you just need to tell Git the status of each change (which Is automatically detected by Git and you only need to master a few basic commands), which is both convenient and space-saving. (Of course, this only works with code text, because Git’s nature is to keep track of lines of code adding and subtracting, which doesn’t work with binaries like videos and posters. There is also Git LFS for this scenario.

Download Git and install it.

MacOS users can download the installation package from the official website or install Xcode directly from the App Store (Git will be installed with it, but it will be large).

A similar tool is SVN. But Git is always recommended because it is more powerful and has a more powerful ecosystem behind it: GitHub.

Hexo

• GitHub: github.com/hexojs/hexo
• Official documentation (direct reference documentation is also a good choice)

Why use Hexo? Hexo is a fast, concise and powerful blogging framework based on Node.js, also hosted on GitHub. There are many plug-in themes in the ecology. You can quickly generate static pages based on it. You can use other people’s themes and plugins, or you can customize the features you want. Why not… ? Other commonly used blogging frameworks include WordPress, Typecho, etc., but these often require the purchase of their own servers and cannot be statically deployed on GitHub Pages. (Of course, there’s a lot more functionality and flexibility.) Static website generators also include Vuepress, Gatsby and so on. These are mostly tailored for documentation, and you can use them, but they have far fewer plugins and themes and solutions for blogging than Hexo’s blog positioning. Hugo offers almost the same functionality as Hexo, but it’s based on the GO language. If you want to customize your website in the future, even with Hugo, you still need tO use JavaScrip to write front-end interactions, so choosing javascript-based Hexo can reduce the learning cost. (If you’re interested in GO, you can still try Hugo, but this tutorial will not focus on Hugo.) So for starters, Hexo is a good starting point. (Of course, if you can afford to rent a server, consider WordPress.)

Enter the following command in the terminal:

# sudo NPM install hexo-cli -g # sudo NPM install hexo-cli -gCopy the code

NPM is a package management tool that comes with Node.js, which you can think of as the app store that comes with Node.js. Install. Hexo cli is a terminal tool for Hexo that helps you generate template files for later use. -g indicates global installation. That is, it can be used anywhere, otherwise it can only be used in the installation directory.

At this point, use the CD to access the directory where you want to store the site code on your local computer. (or right click Git Bash Here)

CD | DOS command CD (LINUXSHELL command)

Such as:

Note: this is your custom directory, please do not copy and paste

The text after the #' #' character represents a comment. You do not need to type # Windows CD C:\Users\YunYou\Documents\GitHub\ # macOS # CD /Users/ YunYou/GitHub /Copy the code

Next type:

Hexo init Your name.github. IOCopy the code

Hexo because we installed the hexo-CLI package, we can use the hexo command in the terminal. Init Initializes the blog template file. Behind is the folder you want to create, and you had better create the same warehouse name.

Github. IO # Default install all packages mentioned in 'package.json' files NPM install # You can also abbreviate hexo s hexo ServerCopy the code

Server means to start the local Hexo server, so you can open your browser and type localhost:4000 in the address bar to see the local web page.

Press Ctrl + C to run the terminal server.

At this point, the basic template page is set up.

Right-click on the folder and use VS Code to open it, or go to VS Code to open the folder where you store your site. All subsequent operations will assume that you are already in the working directory.

There will be a _config.yml file in the directory of the files you initialized with Hexo.

Yml is a suffix for the YAML file, which is short for “YAML Ain’t a Markup Language” (YAML isn’t a Markup Language), but it’s actually a Markup Language. You can think of it as a text format for storing data, which is what it was created for. If you’ve heard of JSON, you’ll have a better idea of what it does.

It is Hexo configuration file, about the meaning of the various configuration options you can view the configuration | Hexo.

Find the theme field in _config.yml and change landscape to yun.

theme: yunCopy the code

Pug is a templating engine that can render as HTML strings. There are also EJS, SWIG, etc., with different syntax and design concepts. Stylus is a CSS preprocessor that can be rendered as CSS. SCSS and LESS are similar, but the syntax and design concept are different.

Since my theme uses puG and Stylus, while Hexo typically comes with EJS and Stylus, you may also need to install the renderer by typing the following command.

npm install hexo-render-pug hexo-renderer-stylusCopy the code

Restart the server as before with Hexo Server and you will see a different themed page.

So far our work has been done locally, and you might want to share it with your friends online. This brings us to GitHub Pages, which only support static files.

So we need to generate a static file for the site first using the following command.

If multiple builds are made, it is better to use Hexo Clean to avoid error caching. Hexo generate # short for Hexo GCopy the code

The public folder will appear under your folder directory, which contains the static files for your site.

We are currently just deploying the generated static files to the cloud.

Just in case, we should also push the site’s source files to the GitHub repository for backup.

Git remote add Origin https://github.com/ your username/name.githubCopy the code

Next, prepare to commit. These are the commands you will need to enter for each backup.

Git add -a git commit -m You may want to set up the default commit branch # git push --set-upstream origin hexoCopy the code

You might find it a bit of a hassle to enter these three commands every time you push. Then you can write bash scripts.

For example, create update.sh in the root directory.

Pencil: Update content 'info=$1 if ["$info" = ""]; then info=":pencil: update content" fi git add -A git commit -m "$info" git push origin hexoCopy the code

After that, you only need to run sh update.sh on the terminal.

Updates are cumbersome, and each deployment is cumbersome, and can be automated using continuous integration.

What is continuous integration? Continuous integration is a software development practice. Automate software builds to find errors. Travis CI is a provider of online continuous integration services. It pulls the code you push to GitHub every time and builds it to your specifications. We can use it to automatically generate static files for our site and then automatically deploy them for us.

The official documentation on how to deploy Hexo using continuous integration is pretty detailed, so I won’t paint a picture.

Deploy Hexo to GitHub Pages

Now that your site is basically set up, go ahead and customize your theme.

Yun Topic Document

Enter the following command to create the xxx.md file.

hexo new post xxxCopy the code

Md, the suffix of Markdown, is a simple and convenient text markup language. You only need to remember a few simple syntax, you can write quickly. Why Markdown? First, Hexo itself converts Markdown into a static Html file that makes it easier for users to write articles. Markdown is like a cross between Word and TXT. Word is bulky, most of its features are virtually useless, and the final document is often loaded with redundant information. TXT is unable to achieve bold, title, underline, horizontal lines and other commonly used functions. (TXT is just a plain text format. Markdown is also a plain text file, but with the syntax and the Markdown compiler, you can see some simple styles.)

This article, for example, was written through Markdown.

## ## ## ## ## # ** Bold text **Copy the code

More syntax (more, but not much) : Markdown basic syntax

Here is a Markdown style I wrote: star-Markdown-CSS

Above is the rendered image, which you can compare with Markdown’s plain text.

First, you have to have your own domain name.

Avoid advertising suspicion, you can go to relevant domain name provider to buy by oneself.

And use CNAME to resolve to your name.github. IO. (Of course, A records can be directly resolved to the GitHub Pages IP address.)

Managing a custom domain for your GitHub Pages site

Create a new CNAME file (without the suffix) under the source folder in the Hexo working directory.

Files in the source directory are copied as-is to the generated static folder, except for the special Markdown that is parsed to HTML.

Fill in your domain name.

About custom domains and GitHub Pages