-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patharticle-4.html
161 lines (139 loc) · 10.4 KB
/
article-4.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html>
<head>
<meta charset="utg-8">
<title>How to jekyll&GitHub Pages</title>
<link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://i.icomoon.io/public/temp/8b185515c6/UntitledProject/style.css">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/article.css">
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-arrow-left2" viewBox="0 0 32 32">
<title>もどる</title>
<a href="/article-2">
<rect width="100%" height="100%" style="fill: transparent;"/>
<path fill=#57C4B9 d="M12.586 27.414l-10-10c-0.781-0.781-0.781-2.047 0-2.828l10-10c0.781-0.781 2.047-0.781 2.828 0s0.781 2.047 0 2.828l-6.586 6.586h19.172c1.105 0 2 0.895 2 2s-0.895 2-2 2h-19.172l6.586 6.586c0.39 0.39 0.586 0.902 0.586 1.414s-0.195 1.024-0.586 1.414c-0.781 0.781-2.047 0.781-2.828 0z"></path>
</a>
</symbol>
<symbol id="icon-arrow-right2" viewBox="0 0 32 32">
<title>つぎへ</title>
<a xlink:href="/article-3">
<rect width="100%" height="100%" style="fill: transparent;"/>
<path fill=#57C4B9 d="M19.414 27.414l10-10c0.781-0.781 0.781-2.047 0-2.828l-10-10c-0.781-0.781-2.047-0.781-2.828 0s-0.781 2.047 0 2.828l6.586 6.586h-19.172c-1.105 0-2 0.895-2 2s0.895 2 2 2h19.172l-6.586 6.586c-0.39 0.39-0.586 0.902-0.586 1.414s0.195 1.024 0.586 1.414c0.781 0.781 2.047 0.781 2.828 0z"></path>
</a>
</symbol>
</defs>
</svg>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/header.css">
</head>
<body>
<header>
<a href="">jekyllとGitHub Pagesの使い方</a>
</header>
</body>
</html>
<div id="main">
<div class="container">
<div class="row">
<div class="col-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="box">
<h1><strong>Mac/Linuxでjekyllを構築する方法</strong></h1>
<p><h2 id="各種ソフトをインストール">各種ソフトをインストール</h2>
<p>jekyllのインストールにはRuby、Node.jsのインストールが必要です。先にこれらのインストールを行います。</p>
<h3 id="rubyinstallerでrubyをインストール">RubyInstallerでRubyをインストール</h3>
<p><img src="/img/article-3/article-3-1.png" alt="img" />
<a href="https://rubyinstaller.org/downloads/">RubyInstaller</a>でRubyをダウンロード、インストールします。<br />
わたしの場合は、WITH DEVKITから太字の推奨バージョンをダウンロードしました。</p>
<h3 id="nodejsをインストール">Node.jsをインストール</h3>
<p><img src="/img/article-3/article-3-2.png" alt="img" />
<a href="https://nodejs.org/en/download/">Node.js</a>をダウンロード、インストールします。<br />
これはCoffeeScriptを使えるようにするためです。</p>
<h3 id="エディタをインストール">エディタをインストール</h3>
<p><img src="/img/article-3/article-3-3.png" alt="img" />
エディタとは、HTMLやcss、Markdownファイルを編集するソフトです。本サイトでは<a href="https://code.visualstudio.com/">Visual Studio Code</a>を使用しますが、他のエディタでもけっこうです。お好きなエディタをお使いください。以下にVS Codeのインストール方法を記述します。<br />
<br />
<img src="/img/article-3/article-3-4.png" alt="img" />
<a href="https://code.visualstudio.com/">Visual Studio Code公式サイト</a>からダウンロードしてください。<br />
<br />
また、Visual Studio CodeでMarkdownを編集するために、Markdownのプレビュー用の拡張機能をインストールすることをオススメします。<br />
<br />
<img src="/img/article-3/article-3-5.png" alt="img" />
インストールしたVScodeを開き、拡張機能をインストールします。
左端リボンの拡張機能をクリック→検索窓に”Markdown preview”と入力→インストール<br />
<br />
<img src="/img/article-3/article-3-6.png" alt="img" />
Markdownファイルを開いた状態で、上部リボン右端に追加されたプレビューボタンを押します。<br />
<br />
<img src="/img/article-3/article-3-7.png" alt="img" />
これでMarkdown Previewが起動します。</p>
<h2 id="jekyllのインストール">jekyllのインストール</h2>
<p>jekyllのインストールと操作にはコマンドプロンプトを使います。GUIを用いてjekyllを操作する方法もありますが、もっともオーソドックスな方法を本サイトでは使います。</p>
<h3 id="コマンドプロンプトの説明">コマンドプロンプトの説明</h3>
<p><img src="/img/article-3/article-3-8.png" alt="img" />
コマンドプロンプトとは、コマンドでWindowsPCを操作する黒いアレです。Windowsの検索機能で<strong>“コマンドプロンプト”</strong>と検索すれば、呼び出せるはずです。<br />
<br />
<script src="https://gist.github.com/zakkuri-manabu/82b4fccf006fcb803dca18539662d183.js"></script>
コマンドプロンプト及びターミナルの説明は、以下のルールにのっとって説明します。<br />
<strong>・”$ “はコマンドの入力を示す</strong><br />
<strong>・”> “はコマンドの出力を示す</strong><br />
<strong>・出力が長文の場合は省略する</strong></p>
<h3 id="rubyとgemの確認">Rubyとgemの確認</h3>
<script src="https://gist.github.com/zakkuri-manabu/6fddf4299928e1b6e3014738bdab6cbc.js"></script>
<p>rubyとgemがインストールできたことを確認します。正常にインストールされた場合は、<strong>“#出力例”</strong>のようにバージョンが表示されます。<br />
gemとは、rubyと供にインストールされるパッケージ管理ツールです。</p>
<h3 id="jekyllのインストール-1">jekyllのインストール</h3>
<script src="https://gist.github.com/zakkuri-manabu/d1dfd661a95e173ae75639dd4d1b0ad2.js"></script>
<p>gemを使ってjekyllをインストールします。
インストールできていた場合、コマンドでバージョンを確認できます。</p>
<h2 id="jekyllの起動">jekyllの起動</h2>
<p>jekyllを使ってファイルを作成します。</p>
<h3 id="jekyll用ファイルの作成">jekyll用ファイルの作成</h3>
<script src="https://gist.github.com/zakkuri-manabu/5e2757d5eb52bc2d20e8812e5ca19f1b.js"></script>
<p>“jekyll new [blog-name]”によってjekyll用のファイル群を作成します。<br />
<img src="/img/article-3/article-3-9.png" alt="img" />
Cドライブのユーザー内に”[blog-name]”というファイルができているはずです。エクスプローラーで確認してください。画像では”jekyll_sample”という名前でファイルを設定しました。<br />
<img src="/img/article-3/article-3-10.png" alt="img" />
“bundle exec jekyll build”は、GitHub Pagesに”push”するためのファイル群”_site”を生成します。この”_site”を作った状態で”jekyll serve”を行うと、ブラウザでサイトのプレビューが見れます。<br />
また、”jekyll serve”の起動中に各種ファイルを変更すると、<strong>jekyllが変更点を反映した”_site”を自動で再生成</strong>します。プレビューを即座に確認できるため、<strong>“jekyll serve”を起動しながら作業することを勧めます</strong>。</p>
<h3 id="サンプルページの確認">サンプルページの確認</h3>
<p><img src="/img/article-3/article-3-11.png" alt="img" />
“jekyll serve”が起動している状態で、ブラウザのアドレス欄に”<a href="http://localhost:4000">http://localhost:4000</a>“を入力してください。ここまでの操作がうまくいっていた場合、画像のようなサンプルページが表示されるはずです。<br />
<br />
<img src="/img/article-3/article-3-12.png" alt="img" />
“Welcome to Jekyll!!”をクリックすることで、図のように記事を読むこともできます。<br />
<br />
<br />
これでjekyllをWindowsで使う準備は終わりです。</p>
</p>
<div id="link-arrow">
<svg class="icon icon-arrow-left"><use xlink:href="#icon-arrow-left2"></use></svg>
<svg class="icon icon-arrow-right"><use xlink:href="#icon-arrow-right2"></use></svg>
</div>
</div>
</div>
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/footer.css">
</head>
<body>
<footer>
<a class="twitter" href="https://twitter.com/zakkuri_manabu"><i class="fab fa-twitter"></i></a>
<a class="github" href="https://github.com/zakkuri-manabu"><i class="fab fa-github"></i></a>
</footer>
</body>
</html>
</body>
</html>