用Github建立个人主页

创建时间：2022-09-26，更新时间：2022-09-26

• 参考：
  • [Gituhub官方教程] https://pages.github.com/
    • 一些基本配置
  • [jekyll themes官方] jekyll-themes, http://jekyllthemes.org/
    • 可以找自己喜欢的、合适的theme
  • [Github 官方教程] Blogging with Jekyll, https://docs.github.com/articles/using-jekyll-with-pages
    • 提供了一些子网站，一步一步教学。我还没有看。
  • [jekyll 更改默认配置] https://jekyllrb.com/docs/themes/#overriding-theme-defaults
    • 比较有用，可以研究研究，现在还没看。
  • [blog] GitHub Pages简易建站教程, https://thesocialnetworkinbox.github.io/Tutorial
    • 适合新手。主要思路是去jekyllthemes中找一个repository，然后fork，改名字为自己的"username.github.io"

1. 建立Github Page

• 创建Github账号。
• 在本地生成sshkey，然后放到Github上去，并生成一个token，之后local用命令行登录的时候这个token就是密码。
• 创建Repository，其中仓库名字叫username.github.io
  • 其中username就是Github账号的名称，必须一致。
• 本地clone这个repository，比如git clone https://github.com/username/username.github.io.git
• cd username.github.git
• 改动示例：echo "Hi~" > index.html
• 配置账号：
  • git config user.email "email@xxx"
    • 其中email@xxx就是Github的注册email
    • 如果本地只有一个github账号的话，就在config后面加上--global
  • git config user.name "username"
    • 其中username就是Github账号的名称
    • 如果本地只有一个github账号的话，就在config后面加上--global
• 提交改动：
  • git add --all
  • git commit -m "Initial commit."
  • git push -u origin main
  • 然后按照要求输入’username’和’password‘
    • 其中这个password是前面生成的token（有保质期），而不是github的登录密码（2021年8月就取消了用帐号密码登录的方式，因为那样不安全）
• 最后登录网站：“https://username.github.io"就可以访问个人主页咯
  • 其中“username”就是github的用户名。

2. 选择theme

• 进入Repository，点击**“Settings --> Pages”**，里面就有访问主页的链接。
• 也可以设置theme，用的是Jekyll框架。
  • 在这个网站可以找themes：http://jekyllthemes.org/
  • 我比较中意这几个themes（即模板）
    • Minimal Text， 适合简历： https://github.com/clarkhacks/Minimal-Text
    • Cayman Blog Theme，适合博客和产品：https://github.com/lorepirri/cayman-blog
    • lanyon-plus，适合丰富的个人主页：https://github.com/dyndna/lanyon-plus
    • Minimal，适合文字版的简历，但是我觉得右边太窄了，左边太宽了：http://jekyllthemes.org/themes/minimal/
    • Minima，jekyll默认的theme，适合写blog：https://github.com/jekyll/minima
• 一般办法就是去theme的repository把它的文件clone到自己的repository中，然后去改，就行了。

3. 关于jekyll

• jekyll是一个静态网页生存生成器
• jekyll是用Ruby写的，
  • 讲解：https://jekyllrb.com/docs/ruby-101/#gems
    • gem
    • bundler
• jekyll安装方法：
  • 参考：https://jekyllrb.com/docs/
  • 首先安装Ruby和其他一些东西：sudo apt-get install ruby-full build-essential zlib1g-dev
  • 注意，如果用的是bash，就写bashrc，如果用的是zsh，就写zshrc：

    echo  '# Install Ruby Gems to ~/ProgramFile/gems'  >> ~/.bashrc 
    echo  'export GEM_HOME="$HOME/ProgramFile/gems"'  >> ~/.bashrc 
    echo  'export PATH="$HOME/ProgramFile/gems/bin:$PATH"'  >> ~/.bashrc 
    source ~/.bashrc
    

  • gem install jekyll bundler
• jekyll使用方法：
  • 切换到目标文件夹，然后在当前文件夹下建立一个project：jekyll new myblog
    • 其中myblog是项目名称，可以自己取。
  • cd myblog
  • 建立一个local server：bundle exec jekyll serve
  • 打开浏览器，进入：http://localhost:4000
  • 就可以一边本地改动，一边刷新网络浏览效果了～
    • 注意：改了_config.yml后，网页上不会立即出现效果，需要停止server，再重开，才能更改基本配置。
    • 好处是可以用Markdown写，然后自动build为html～
    • 下一步就是把jekyll和github.io结合起来