LoginSignup
7
6

More than 3 years have passed since last update.

github.ioのWebページにテーマを反映させてみた

Last updated at Posted at 2018-11-21

github.io

  • GitHubのレポジトリでWebページを公開したときのURL。
  • javascriptが動くhtmlを公開できる。

日記

  1. GitHubのレポジトリにdocs/index.htmを作る。
  2. SettingsのGitHub PagesでSourceのmaster branch/docs folderを選んでSave。
  3. Theme Chooserでテーマを選べるのかと思って元々選ばれているCayman themeを選んでみた。
  4. github.io でWebページを公開できた:laughing:が、テーマが反映されてない:disappointed_relieved:

image.png

テーマが反映されてない!?


---
layout: default
---

HTMLファイルの <body> だけ残して他を削除し、この3行をHTMLファイルの先頭に追加したらテーマが反映された:laughing:1

こんなページになった

githuio.png

docs/_config.yml
theme: jekyll-theme-cayman
lang: ja-JP
title: タイトルを変更してみた
docs/index.htm
---
layout: default
title: タイトルは2つある
description: metaタグで見れる
---
<body>
  <h1>文字の大きさ h1</h1>
  <h2>文字の大きさ h2</h2>
  <h3>文字の大きさ h3</h3>
<pre>
&lt;pre&gt; のテスト
</pre>
<p>
&lt;p&gt; のテスト
</p>

{% highlight javascript %}
const fun=function(){
    console.log("test");
};
{% endhighlight %}

テーマの設定をもっと変えたらブログのようになるようだ。

Markdownで書くこともできた

index2.mdを作ったらindex2.htmlに変換された。

docs/index2.md
---
layout: default
title: トップページ2
---

# ここは h1 に変換される

* ここは ul li に変換される

  1. 出典はGitHub Community Forum の Page not showing the theme。 

7
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
6