Wonder4 Life

Github 创建项目主页

Github 除了可以创建个人主页以外,也可以创建项目主页。以下表格列出了对应的域名:

Type of GitHub Pages site Pages default domain & host location on GitHub Location of the source files for building your Pages site
User Pages site username.github.io master
Organization Pages site orgname.github.io master
Project Pages site owned by a user account username.github.io/projectname master, gh-pages, or a /docs folder on master
Project Pages site owned by an organization orgname.github.io/projectname master, gh-pages, or a /docs folder on master

创建项目主页

  1. 新建项目 repo , 建议此时生成 README ,以免 repo 为空无法创建 page。
  1. 点击 Settings ,在 GitHub Pages 部分选择 master 分支,或者 master 分支的 /doc 文件夹作为 Source。

由于个人主页已经绑定域名,所以此处域名为 http:///

项目主页 Hexo 配置

项目主页选用了 Magnetic 主题,基本配置方法与个人主页类似,不过在全局配置文件 _config.yml 中,需要修改为子目录方式:

1
2
url: http://<yourdomain>/<projectname>/
root: /<projectname>/

Hexo 的图片可以根据不同的需求放在:单篇文章图片目录,全局图片目录

单篇文章图片目录参考之前的文章,关键是在全局 _config.yml 中打开 post_asset_folder:true 选项

全局图片目录可在 source 目录下建立 assets 目录,将图片拷贝到目录下:

1
2
source/assets
├── cover.jpg

在生成网站时会拷贝到 public 目录下:

1
2
public/assets
├── cover.jpg

在文章中可以以相对路径的方式设置封面和细节图片,如封面采用全局图片资源细节采用文章图片资源:

1
2
3
4
5
title: Title
date: 2017-05-31 16:18:13
cover_index: assets/cover.jpg
cover_detail: detail.jpg
tags:

但是在项目主页中采用了子目录的方式存放网页,会造成图片路径不对的问题:

1
root: /<projectname>/

所以需要修改主题的图片路径 layout/_partial/article-index.ejs

1
2
3
4
5
<% if(item.cover_index){ %>
<img src="<%- config.root + item.cover_index %>" class="media" alt=""/>
<% }else{ %>
<img src="<%- theme.default_cover_index %>" class="media" alt=""/>
<% } %>

Reference

User, Organization, and Project Pages

Magnetic Blog Hexo