using github for website development

2022.03.26

GitHub PagesIs a static site hosted service,Directly fromGitHubThe repository is obtainedHTML,CSSandJavaScriptdocument,You can also choose to run these files and publish a website during the construction process.。

set upGitHubpage

template

(USING GITHUB for Website Development)Researchers usually use two types of personal website templates:Rage(hugo)Jiekil(jekyll)Theme academic page。The examples shown here are based on“ minimum-mistakes-jekyll”Topic custom version。

1. GitHubpage

CreateGitHubAccount,Your personal website will host there。

Notice:If you don't want to pay for any domain name,Please choose your account name carefully,Because it will eventually become your website link address。

exist“Code”Download all files from the head download related academic pages,Or existing from researchersGitHubPage download,E.g,

  • GitHub: zejiang-unswofzejiang-unsw.github.io
  • GitHub: oliviergimenezofoliviergimenez.github.io
  • GitHub: samzipperofwebsite-HEAL

2. version control(Git Version Control)

downloadGitHub DesktopAs your version control tool。

WillGitHub DesktopWith youGitHubAccount link。

Add a local repository from a folder downloaded and decompressed。Make changes,Submit a change(commit)Push(push)arriveGitHub。exist“Your account name”.github.ioRefresh your homepage。

3. personal information

Change the details to your details,These files mainly include the following:

  • _config.yml
  • _pages: Includes each individual page
  • _publications: Including article you published
  • _talks: Including your conference speech
  • _portfolio: Including your project
  • _teaching: Including your teaching experience
  • _posts: Including your blog
  • images: Related pictures of the website
  • files: Relevant files including websites

custom made

1. Adjustment _dataLowernavigation.ymlPage order

2. Author page on the left side of the page:

author_profile: false or true

3. Sort the order of the website:

(USING GITHUB for Website Development)### reversed
{% for post in site.talks %}
{% include archive-single-talk.html %}
{% endfor %}
{% for post in site.talks reversed %}
{% include archive-single-talk.html %}
{% endfor %}


How to add a new page

(USING GITHUB for Website Development)1. _config.yml:

collections:
people:
output: true
permalink: /:collection/:path/
defaults:
# _people
- scope:
path: ""
type: people
values:
layout: single
author_profile: true
read_time: true
comments: true
share: true
related: true

2. _pagesLowerpeople.html

---
layout: archive
title: "People"
permalink: /people/
author_profile: true
---
{% include base_path %}
# to link the documents under _people folder
{% for post in site.people reversed %}
{% include archive-single.html %}
{% endfor %}

3. _dataLowernavigation.yml

  • Change the title to change the tab name shown online!
  • Comment out to not show the People tab online!

# main links links
main:
- title: "People"
url: /people/


How to add a avatar

1. Add the following code toHTML or mdmiddle

<img src="avatar.png" alt="Avatar" class="avatar">

2. Add category to CSS middleassetsmiddlecssLoweracademicons.css

.avatar {
vertical-align: middle;
width: 100px;
height: auto;
position: relative;
overflow: hidden;
border-radius: 50%;
}

返回列表
更多新闻资讯