Start from need

For front-end developers, students majoring in computer and software engineering, or people interested in programming, it is a cool thing to have a website of our own, which can be accessed by others. It can be a platform for us to accumulate knowledge, or write some emO 🥺 diary as our own nest. But considering that there are many small white is not front-end direction or no system to learn a language, build a website is more tedious, so there are the following requirements.

  • There is no need to buy server, cloud host and other tedious configuration
  • Concentrate on content creation and don’t need to spend more time on layout
  • Language, technology stack requirements are not high, easy to use

Technology selection

We want to show the web page, the first to have a Web page, which is commonly known as the web page, for Daniel, you can manually code, a person through the front and back end. But there are plenty of mature frameworks out there to choose from, and here are some common ones. WordPress (PHP +MySQL)

Apply to blogs to large sites CMS (content management system) | WordPress.org China

Advantages: more community support, rich theme, more derivative plug-ins, high degree of customization.

Disadvantages: troublesome deployment, high learning threshold, not friendly to small white.

Why ❓ for most students new to the front, his hand to write a personal blog site more arduous, so with the method of automatically generating documentation, only need to learn a markdown syntax, can be creative, and support the markdown grammar editor has a lot of, you can be in platform to create, move the code to the project, The framework will help you parse into HTML files.

Docisfy – Docsify can help you quickly generate document sites

Vue-press (Vue Technology Stack)

VuePress is a markdown-centric static web site generator. VuePress was originally created to support the documentation needs of vuue.js and its subprojects, but it is already helping a large number of users build their documents, blogs, and other static websites.

Dumi (React Technology Stack)

Applies to componentized documents

Hexo (Node.js + native JavaScript)

Designed for blogging, the topic is also very rich, community support.

The following content is based on Hexo, hosted by Github-Pages, and the theme is hexo-theme-yun

🚀 process

Hexo’s local development relies on the Node.JS environment, and since it is hosted on GitHub as an open source, we need to download Git and Node.JS directly from Baidu’s official website and install it mindless. I will not repeat it here.

Pre – work

Long-term maintenance version is recommended and installed by default.

Select a version based on the operating system

CMD to view the version number

Download the Hexo- CLI (Command-line interface) command line tool to initialize the content

$ npm install hexo-cli -g$ hexo init <project name> $ hexo serve
Copy the code

FAQ: Initialization fails

Fatal: Unable to access ‘github.com/hexojs/hexo… ‘: OpenSSL SSL_read: Connection was reset, errno 10054

Since we need git to pull the code in Github, it will be affected by the network, so just try again.

After starting the project by default, Hexo Serve starts the service, opens the project in localhost:4000, and you can see the theme hexo provides for us by default. \

Next, install the theme we want, which can be found on Hexo’s official website. Here, hexo-theme-yun is used as an example, because I like blue as things, and it has detailed configuration items, which are very friendly to white people. Click to read the original text to view the official document.

\

git clone https://github.com/YunYouJun/hexo-theme-yun themes/yunnpm install hexo-render-pug
Copy the code

Since our theme uses a PUG template engine, and EJS is installed by default, we also need to download the PUG template engine. The same thing happens here with the network.

Secondary development, custom.

Choose your favorite IDE, open the project, and modify the configuration to make the theme work. You can view the official documentation for Hexo configuration and basics. This article only describes the basic configuration and commands.

Modify the theme field of the _config.yml file to use the theme.

Start the project again, look at localhost:4000, and then you can customize.

The deployment of online

Static pages, web application deployment mainstream solutions are

  • Cloud host/server + public Ip address + independent domain name
  • Cloud hosting, Tencent Cloud Cloudbase, Webify
  • Code hosting platforms like GitHub/ Gitee

While the first two are fee-based and designed for Web applications, we’ll use the third.

Tips: Gitee Pages requires a real name. Github Pages is a native solution, but will sacrifice access and deployment speed.

Create a GitHub account, use your email address, and create a new repository.

Github Pages must meet the specification to enable github Pages

Hexo also provides quick and easy one-click deployment capabilities that allow you to deploy a web site to a server with a single command, which requires downloading the deploy.git tool.

npm install hexo-deployer-git --save
Copy the code

Change the deploy field in _config.yml

Git repo: [email protected]: siquan-wen/siquan-wen.github. IO. Git branch: master Update Hexo Static Content # You can customize the description of this deployment Update $Hexo deployCopy the code

GitHub has upgraded its security policy, so HTTPS push code may be rejected and SSH/token needs to be enabled. For this part, you can refer to CSDN and other platforms to solve the problem, or you can also follow my language document.

END