Build your personal website with github & hexo

This is about the basic steps of building your own website with only a github account as prerequisite.
Start building your knowledgebase!!!

---

Set up your computer

• Installation

1. node.js and npm: NodeJS is a cross-platform Javascript runtime environment; npm allows open-source web developers to share and borrow packages for app development.
   (Here you can find more explaination of them: https://radixweb.com/blog/installing-npm-and-nodejs-on-windows-and-mac)
2. git: to manipulate the deployment on github.
3. hexo: an easy and convenient blog workflow.

   npm install hexo

• Sign up github account and create new repository
  1. Go to https://github.com to create a new account if you don’t have one, set a nice user name which will be part of your website address.
  2. Create a new repository named as username.github.io, where all the code for your website will be stored at.
     (The address of your future website will be http://username.github.io.)
• Configure the computer
  1. Connect the device with github repository
     In git bash terminal, execute following command:

     cd ~/.ssh  ## check the existed ssh key in your local computer if there is one

     Reminder No such file or directory means you haven’t used git before and you need to create the ssh key with the following command:

     ssh-keygen -t rsa -C "your-email-address"

     Then a file ~/.ssh/id_rsa.pub will be created and the ssh key is the cotent in it.
     You just need to copy and paste all the content in that file into github, the connection will be done. This is where to paste in github:
     Go to account setting -> SSH and GPG keys -> New SSH key *Note*: Title is the name you give to your connected device; Key area is where you paste the ssh key. Then, go to your local device, and run:

     ssh -T git@github.com

     The message `Hi username! You've successfully authenticated, but GitHub does not provide shell access.` means you've done it successfully. Next, two more commands need to be run:

     git config --global user.name "user-name" ## your github user name
     git config --global user.email "xxx@xx.com" ## your github signed up email

     And this is finally done.
  2. Create a folder in your local computer
     Create a folder in your computer where everything about the website will be stored at, as an example here: ~/blog
  3. Hexo initiation
     Go into the folder you just created for your website (~/blog), and implement the initiating command:

     hexo init

     Then some files and folder about hexo will be created.
  4. Set up the _config.yml file
     To let your computer know it’s connected to the github, following settings must be done in file ~/blog/_config.yml:

     deploy:
     type: git
     repo: git@github.com:user-name/user-name.github.io.git  ## substitue with your own user name
     branch: master   

Post an article using basic commands

1. Create a new article

   hexo new "new-post-name"

   This command will create a new file new-post-name.md in folder ~/blog/source/_post, which is the content of your new post.
2. Edit the article
   Choose any Markdown editors you like to put your content in.
   Some tricks to make your post looks more pretty:
   • Using <!--more--> to only show the content before it in the home page
   • Using html grammer to set the format of images:<div style="text-align:center"><img src="./sample.png" width=500 height=350 /></div>
   • Change the color of certain sentence with <font size=5 color="#FF0000">This is the example.</font>
   • Change the position of sentence with <center>This is the example.</center>
3. Upload the article

   hexo generate (hexo g) ## Generate static files in public folder
   hexo server (hexo s) ## To preview your new article at address: http://localhost:4000
   hexo deploy (hexo d) ## To deploy your new article

   Well, so far, you can already read your article in http://user-name.github.io

Decorate your website

Not necessarily needed, but will make your website more personalized and pretty.

1. Theme
   Change the theme of your website to any kind in the repository: https://hexo.io/themes/
2. Add tags

   hexo new page tags