Create your own blog using Github.io

Article directory

  • 1. Final effect
  • 2. Operation steps
    • 2.1 Preliminary operations
    • 2.2 Modify the content according to your own needs
      • 2.2.1 Basic modifications
      • 2.2.2 Add additional links to social networking sites such as Zhihu
    • 2.3 Home page modification
    • 2.4 Check release status
    • 2.5 Strange error (wrong avatar display)
    • 2.6 Local debugging
    • 2.7 Subsequent modifications
  • 3. Set the project to private (do I need to pay to upgrade my account?)
    • 3.1 Cancel/unbind fork dependencies
    • 3.2 Set privacy

1. Final effect

2. Operation steps

2.1 Pre-operation

  1. Fork repo, https://github.com/academicpages/academicpages.github.io
  2. Enter the fork project, click Setting, and change the name to your github name.github.io (yourname.github.io),
  3. Download the fork project locally, open vscode and prepare to start editing and modification

2.2 Modify the content according to your own needs

2.2.1 Basic modification

Copy all the contents in _config.yml to _config.dev.yml, use the latter as a backup, and then modify the former.

The main ones are the modification of name, baseurl and description personal description, etc., so I won’t go into details here.

refer to:

  • Building an Academic Website
  • https://academicpages.github.io/markdown/
  • https://github.com/linfangjian01/linfangjian01.github.io
  • https://bryanyzhu.github.io/

2.2.2 Add additional links to social networking sites such as Zhihu


For example, you want to add links to Zhihu and csdn

  1. In _config.yml, in the author field, write the name and corresponding url link address as above
  2. In _includes/author-profile.html, copy the following and then modify it. For the value of the class field, you can search on the website https://fontawesome.com/search
  3. It is recommended to look at this: https://www.w3schools.com/icons/icons_reference.asp. It seems that this webpage only supports part of font awesome (font awesome 5)
  4. Then fill in the corresponding value, for example:

refer to:

  • Way to add blogger icon and link easily? #784
  • https://fontawesome.com/search, you can find the class name of the icon you want on this website

2.3 Home page modification

  • ① on the left is actually the Site Author section of the _config.yml file. Regarding the personal avatar, the default booth image is a 720720 png image. Therefore, your images should be 720720 as much as possible. You can crop them in PPT and then send them via WeChat to compress them.
  • The above ②, its entity is in _data/navigation.yml, you can delete or comment out the unwanted ones, which actually correspond to each sub-folder, for example: Publications corresponds is the _publications folder, which can store content in the form of md files or html files.
  • ③ above, corresponding to the _pages/about.md file, you can directly use the pound sign syntax of markdown’s first-level title and second-level title.

2.4 Check publishing status

According to https://docs.github.com/zh/pages/quickstart, it is usually released in 5 to 10 minutes, but in fact, you can see the corresponding build and release by viewing Actions status, basically about 1 minute

2.5 Strange error (wrong avatar display)


The avatar cannot be displayed and there is an extra space in the link.

Search and locate the problem to the file _includes/author-profile.html

The reason for the appearance of this space is that after adding the links to Zhihu and csdn, it was saved in VScode. When saving, the html file was formatted by default and this space was automatically added.

According to how to solve the problem of automatic formatting of HTML after saving in vscode, you can directly go to the preferences to modify the format.

2.6 Local debugging

I have not tried this part of the content, from: https://jayrobwilliams.com/posts/2020/06/academic-website/

If you want to debug locally, you need to install Jekyll. The simplest installation method is to use Bundler to install. Bundler is a Ruby package manager, Jekyll is written in Ruby

  • If it’s Windows, you need RubyInstaller
  • If it is macOS, you can install it directly with homebrew 
    brew install ruby
  • If it is Linux, install Ruby directly using the package manager, and then execute 
    gem install bundler
  • After installing bundler, you can switch to the project directory and execute 
    bundle install

    This sentence will read the Gemfile file and perform some installation

  • Next, you can start a jekyll service locally, 
    bundle exec jekyll serve

    Then visit 127.0.0.1:4000 or localhost:4000 to see the web page

2.7 Subsequent modifications

After you have a basic understanding of the file structure, if you want to change anything, just refer to the following two finished products to make changes.

  • https://academicpages.github.io/publications/
  • https://bryanyzhu.github.io/
  • https://yonsci.github.io/yon_academic//
  • https://junqing-zhang.github.io/
    • https://github.com/academicpages/academicpages.github.io/compare/master…junqing-zhang:junqing-zhang.github.io:master
    • It is actually more direct to see what has been changed.

3. Set the project to private (do I need to pay to upgrade my account?)

3.1 Cancel/unbind fork dependencies

If the original project is directly forked, the visibility of the project cannot be changed to private. Therefore, you can use github’s virtual assistant:

  1. Click the link: https://support.github.com/contact?tags=rr-forks & amp;subject=Detach Fork & amp;flow=detach_fork
  2. Select Detach/Extract
  3. Then follow the prompts and enter the repo url or yourname/repo to cancel the fork relationship, etc.
  4. Then go to the mailbox bound to your github, and you can see a work order number
  5. Click to see the details of the work order. If the unbinding operation is completed, there will be additional notifications in the email. Just wait. I waited for about 4 hours Display of processed work order

3.2 Set privacy

  • After receiving the unbinding notification, you can go to the settings to set the project to invisible.
  • BUT, if you want to set it invisible, then github pages must be upgraded to the professional version. . .
  • So, forget it, let’s keep it public.

refer to:

  • Delete fork dependency of a GitHub repository

Other references (non-academicpages sight):

  • https://idratherbewriting.com/documentation-theme-jekyll/mydoc_publishing_github_pages.html
  • https://www.natalyakosenko.com/2017-12-23-how-to-switch-jekyll-theme-on-github-pages-site
  • https://github.com/poloclub/ganlab/tree/master
  • Use github.io to quickly have your first free personal homepage
  • How to build a personal website on GitHub (github.io)