网站搭建教程搭建个人网站

Hexo + Github + Coding = Interna

2018-12-21  本文已影响42人  AptX395

本文已经发布在我的个人网站 jerrydeng.site 上,欢迎访问


Perface

Why use both platforms at the same time?

Because Github is a foreign platforms, it's unstable sometimes. And Coding is a domestic platform, whitch is stable and fast.

Use both of them could make your website stable and fast.

Hexo Profile

Hexo is an open source blog framework. It's popular, lightweight and easy to use. It is based on Node.js and generates static web pages. So it's quickly to visit your website. And Hexo support writing with Markdown.

Preparation

You could skip following steps if you already have done.

Install Git

Download Git and install it. Run git --version with terminal to test whether Git has been installed successfully.

Git_version

Install Node.js

Download Node.js and install it. Run node -v with terminal to test whether Node.js has been installed successfully.

Nodejs_version

PS: When you install Node.js, you will also install npm. It's necessary to install Hexo.

Run npm -v with terminal to test whether npm has been installed successfully.

npm_version

npm is the package manager for JavaScript and the world’s largest software registry.

Install Hexo

Run npm install hexo-cli -g with termianl to install Hexo globally. Run hexo -v to test whether Hexo has been installed successfully.

Hexo_version

Register Github and Coding account

Visit Github and Coding to register your accounts. You'd better sign up with the same email address. (It's useful for later steps)

PS: Because of Coding has cooperated with Tencent Cloud, you could directly register an account at Tencent Cloud Developer Platform for more benefits.

Configure SSH

  1. Run git config --global user.email "your_email_address" with terminal to set user email.

    PS: your_email_address needs to be replaced by your email address which you used to sign up your Github and Coding accounts.

  2. Run ssh-keygen -t rsa -b 4096 -C "your_email_address" with terminal and press Enter three times in a row to generate SSH key by default.

  3. Open C:/Users/your_user_name/.ssh/id_rsa.pub , copy it's all contents.

    Then visit here , sign in your Github account, click New SSH Key and paste your SSH key, save it.

    Visit here to create a new SSH key for your Coding account by the same way.

  4. Run ssh -T git@github.com and ss -T git@git.coding.net with terminal to test whether your SSH key has been configured successfully.

    Github_SSH_test Coding_SSH_test

Build website at local

  1. Select or create the directory where you want to build a website.

    PS: I'll call it your_website/ here.

  2. Open terminal under your_website/ .

  3. Run hexo init to initialize a website.

  4. Run hexo new "my_first_post" to generate a new post.

    PS: my_first_post is the name of post, you could replace it with another name.

    Then you could find the post file at your_website/source/_posts/ .

    This directory saves all of your post files.

    If you want, you could edit your post file first. Learn Markdown at Markdown Tutorial .

    Markdown is a lightweight "Markup Language", which has many advantages and is now widely used by writers who are more and more writing enthusiasts.

    See here please do not be confused by "Mark", "Language", Markdown syntax is very simple.

    There are no more than 10 commonly used marker symbols, and once you get familiar with this grammar rule, it will work once and for all.

  5. Run hexo g or hexo generate to generate website.

  6. Run hexo s or hexo server to run website at http://localhost:4000 .

    Open browser and visit http://localhost:4000 to preview the effect of your website.

    hexo_g

Push website to remote repository

  1. Create a new repository on Github , named your_Github_account_name.github.io .

    Then create a new repository on Coding , named your_Coding_account_name.coding.me .

    PS: your_Github_account_name and your_Coding_account_name needs to be replaced by your Github account name and Coding account name.

  2. Open your_website/_config.yml , find following codes:

    deploy:
      type: git
      repo:
      branch:
    

    Add your repository SSH link at Github and Coding behind repo: as following:

    deploy:
      type: git
      repo:
        Github: your_Github_repository_SSH_link,master
        Coding: your_Coding_repository_SSH_link,master
    

    PS: your_Github_repository_SSH_link and your_Coding_reporitory_SSH_linl need to be replaced by your Github and Coding repository SSH link.

  3. Run hexo d or hexo deploy to deploy website at https://your_Github_account_name.github.io and https://your_Coding_acconut_name.coding.me at the same time.

    PS: Here, you could already access your website via https://your_Github_account_name.github.io .

  4. Open the Coding Pages Service
    Visit Coding , open the repository that you created in the previous step (the repository named your_Coding_account_name.coding.me ), click Settings , scroll down and find Coding Pages and start it.

    Coding_pages

    PS: Here, you could already access your website via https://your_Coding_account_name.coding.me .

Optional: Configure a domain name

Why configure a domain name?

On the one hand, people could accese your website through your personalize domain name, instead of the complex domain name in the previous steps.

On the other hand, visiting Github in China can be erratic at times. It's better to visiting Coding in China instead.

Buy a domain name

You could buy a domain name on so many websites, such as Ali Cloud , Tencent Cloud , and Godaddy .

Here I'll show you how to buy a domain name on Ali Cloud .

Visit here and find a domain name that you like. Then follow the website's guide to pay for the domain name.

Domain_name

Configure domain name resolution (DNS)

Visit here , and sign in your Ali Cloud account.

Then click 解析 .

解析

Click 添加记录 and add two CNAME records like this:

CNAME

Add CNAME file

Create a file named CNAME (note: no suffix) under your_website/source/ .

Then open the file named CNAME , fill in your domain name like this:

CNAME_file

Configure Github Pages and Coding Pages

Visit the Github repository of your website, and click Settings . Then scroll down and find Github Pages . Fill in your domain name like this:

Github_settings Github_pages

Visit the Coding repository of your website, click Settings , scroll down and find Coding Pages .

Coding_pages_settings

Fill in your domain name like this:

Coding_custom_domain

Finally, deploy your website!

Run hexo clean , hexo g and hexo d with the terminal.


Above, your international website is built successfully!


上一篇 下一篇

猜你喜欢

热点阅读