CS7345 FinalProject

GitHub & Hexo

What is Hexo? The explanation of the official website is: hexo is a fast, concise and efficient blog framework. Hexo uses Markdown (or other rendering engines) to parse articles, and within a few seconds, you can generate static web pages with beautiful themes. My understanding: First, create a warehouse (username.github.io) on the GitHub platform to store the material of the blog, then install git and git-desktop on the personal PC, install the hexo blog framework on the personal PC through git, we are here Write a blog (markdown file) in the local framework, and then push these files to github, and the blog content will be published on the github web page.

Check if Node.JS has been installed in PC.

Install Hexo. Because I have used hexo once, hexo has been installed on my computer.

I made a new folder for this website on desktop. Initialize this directory as the hexo directory.

I can test it on localhost. It has an error because my node.js version is 10.0 not 12.0.

I can fix this error by update Node.JS to 12 or turn off highlight in _config.yml file.

Then visit localhost:4000 to see the website.

Edit the deploy node in the blog configuration file _config.yml. Remember to replace username with your own username.

Note: The repo in this form is after the SSH Key is configured. If it is not configured, the Https form of address is used.

In order to be able to deploy Hexo to GitHub, you need to install a plug-in, run the following command in the blog directory

Execute:

hexo clean

hexo g -d

At this point, the settings of hexo and Github are complete.

Website

Since github can only support the use of usernames to access websites in the form of URLs, and has been maintaining the blog I built with hexo+Github, so I will use my blog as the carrier of this final project, based on the original needs to be improved.

I purchased a domain name on Godaddy, and I have done DNS resolution.

So the website can be visited using this URL:

https://ama666.cn

Some awesome website

I think the official websites of Apple (https://www.apple.com/) and Tesla (https://www.tesla.com/) give users a very good experience when displaying products. As the user pulls down the webpage, the details of the product are shown to the user bit by bit.

I still think

Change theme

Then use the clone method to download the desired theme. (I chose the NexT theme)

After git cloning is complete, open the “_config.yml” configuration file in the current directory.

Find the configuration options of the theme, usually at the end of the file. After that, configure the theme option to our newly downloaded next theme. (“:” The space after the colon is indispensable)

I have tried other themes, but I think the nexT theme is the most suitable for my blog.

Website Overview

The structure of my website is shown in the figure below. The front page is the first page you see when you click into the website, and it contains articles I wrote recently, allowing users to quickly find things of interest. It can also contain the latest research and development products.

The following About is a simple self-introduction to let users know who I am.

Then the Classification tag classifies all the articles in my blog to help users quickly locate the articles they want to read.

Users can click “Read the full text” to read the full text. Only the abstract of the article is provided in the front page, which allows users to quickly understand what the article is about.

My website also provides access control. Some articles are classified or have not yet been published. Because some of the articles are about vulnerabilities, and these vulnerabilities have not been disclosed, encryption is required. Enter the password to see the entire content of the article.

Because people always try new technologies, it is often necessary to migrate blog content. For example, my blog is migrated from Wordpress. The subsequent problem is that the publication date of the article will become the same day. My blog can sort articles according to the date specified in the article and display the specified date. In this way, you only need to write the date in accordance with the format when writing the article, and there will be no trouble mentioned above.

Custom Page

The articles in the Hexo series of blogs are all static web pages rendered by Hexo themes. Therefore, most of Hexo blogs show a high degree of uniformity and standardization. However, Hexo provides a skip rendering function, which allows us to put custom web pages directly in the blog.

For example, put pictures in the blog, customize 404.html, customize About page, resume, etc.

The webpage can be written by yourself, or it can be the source code of others (download the page you like).

After the web page is written, create a folder in the hexo\source directory (the folder name is arbitrary, for example, I created the “lab” folder. After the deployment is complete, visit https://ama666.cn/lab/show.html to see to effect, and so on)

Place the html file in this folder and rename it to show.html.

Skip rendering

There are two ways to skip rendering:

Add a skip rendering instruction in the html file

Use an editor to open the show.html file placed in the folder created by \Hexo\source, and add the following code at the beginning

-–

layout: false

-–

After adding this command, the show.html file will be skipped when the hexo g command is executed, so that show.html is not affected by the current hexo theme and is completely an independent web page. If the web page references css or js, css and js are required Use external links or put css js files into show.html and reference in the same directory.

Set skip_render in the _config.yml file

Use an editor to open the _config.yml file in the Hexo directory and find skip_render

skip_render generally has the following four commonly used parameters:

Skip test.html in the source directory: skip_render: test.html

Skip all files in the test folder in the source directory: skip_render: test/*

Skip all files in the test folder in the source directory, including subfolders and files in subfolders: skip_render: test/**

Skip multiple paths:

skip_render:

-test.html

-test/*

JS

However, it is not possible to put the js file directly in the lab directory. The problem of not being able to reference js will occur. You need to put the js file in the hexo/themes/hexo-theme-next/js/ path.

This time the custom page is working fine.

But don’t enter a number greater than 18, it will cause a error