-
Notifications
You must be signed in to change notification settings - Fork 0
/
feed.xml
267 lines (234 loc) · 15.6 KB
/
feed.xml
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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="https://www.w3.org/2005/Atom">
<channel>
<title>Xuna Xu</title>
<description>Xuna Xu's webpage</description>
<link>https://www.xunaxu.com/</link>
<atom:link href="https://www.xunaxu.com/feed.xml" rel="self" type="application/rss+xml"/>
<pubDate>Tue, 01 Nov 2016 19:20:33 +1030</pubDate>
<lastBuildDate>Tue, 01 Nov 2016 19:20:33 +1030</lastBuildDate>
<generator>Jekyll v3.0.5</generator>
<item>
<title>How to Set Up a Blog Site Using Jekyll and GitHub Pages</title>
<description><p>Since I set up this site using Jekyll and Github Pages, why not write a post? There is no hosting cost and it is easy to use. Here is a step by step guide to set up a Jekyll site using GitHub. It covers from the basic such as starting with a generic theme to deployment. We are using Jekyll Iris Theme as an example here because that is what I am familiar with the most. With this guide you will be able to quickly and easily have a blog ready to go!</p>
<p><br /></p>
<h2 id="step-1-setting-up-and-running-a-jekyll-site-locally">Step 1: Setting Up and Running a Jekyll Site Locally</h2>
<p>You can clone Jekyll Iris theme by following the commands below, or you can find a theme you like at <a href="https://jekyllthemes.org/">Jekyll Theme website</a>
<code class="highlighter-rouge">
git clone https://github.com/XunaXu/Jekyll-Iris.git
cd Jekyll-Iris
gem install bundle (if you don't have bundle installed in your computer)
bundle install
jekyll serve
</code>
Open a web browser at this address: https://127.0.0.1:4000/Jekyll-Iris/.
Note: I am using a Mac with 2.3.0 Ruby installed. You may need to <a href="https://www.ruby-lang.org/en/downloads/">download</a> or update Ruby.</p>
<div class="expand-div">Having trouble? Have a look at my screen, it may help. <button class="toggle-button">expand</button> <div class="expandable" expanded="false">
<img src="/assets/images/setup_jekyll.jpg" alt="Set up and run a jekyll theme" />
</div></div>
<p><br /></p>
<h2 id="step-2-customising-the-site">Step 2: Customising The Site</h2>
<p>Now you have a generic site up running, it is time to make it yours.</p>
<ul>
<li>
<h3 id="update-configyml">Update _config.yml</h3>
<p>Open the jekyll iris project using an IDE or whatever way you prefer. There is _config.yml located at the top level of the directory. There are a list of variables in _config.yml we need to change. <strong>Any changes in this file requires to run ‘jekyll serve’ to take effect</strong>.</p>
<div class="expand-div">Having trouble? Have a look at my screen, it may help. <button class="toggle-button">expand</button> <div class="expandable" expanded="false">
<img src="/assets/images/config.jpg" alt="_config.yml file" />
</div></div>
<ul>
<li>
<h4 id="update-site-title">Update Site Title</h4>
<p><code class="highlighter-rouge">
title: Xuna Xu
</code>
Update the title variable to your name or whatever you like. This will impact on the site title and also the site logo which is located at the right hand side of the navigation bar. Currently it displays as my name.</p>
</li>
<li>
<h4 id="update-contact-information">Update Contact Information</h4>
<p><code class="highlighter-rouge">
github : https://github.com/xunaxu
twitter : https://twitter.com/xuna_x
linkedin : https://au.linkedin.com/in/xuna-xu-8a135094
avatar : /assets/images/my_avatar.jpg
</code>
Social media accounts are your contact details in the footer, so people can connect with you via github, twitter and linkedin. To change the avatar, you need to replace my_avatar.jpg located at Jekyll-Iris/source/assets/images. The rest are not being used and are there only for house keeping.</p>
</li>
<li>
<h4 id="add-google-analytics">Add Google Analytics</h4>
<p><code class="highlighter-rouge">
# google analytics
google_analytics: UA-819232-**
</code>
Here is a <a href="https://support.google.com/analytics/answer/1032385?hl=en">google analytics blog post</a> for getting your tracking id. Once you have the tracking id, you can replace the dummy value here.</p>
</li>
<li>
<h4 id="add-disqus-comment">Add Disqus Comment</h4>
<p><code class="highlighter-rouge">
# comments
comments: true
disqus_shortname: "xunaxu"
</code>
If comments variable is set to false, the comment section is not displayed.
Disqus_shortname is your disqus user name, you can register one from the <a href="https://disqus.com/profile/signup/">Disqus site</a></p>
</li>
<li>
<h4 id="add-mail-chimps-subscribe-form">Add Mail Chimps Subscribe Form</h4>
<p><code class="highlighter-rouge">
# subscribe
subscribe: true
</code>
If subscribe variable is set to false, the subscribe form is not displayed.
Here is the <a href="https://kb.mailchimp.com/lists/signup-forms/add-a-signup-form-to-your-website">blog post</a> from mail chimps for getting a subscribe form. Once you have the embeded form code, copy and paste into Jekyll-Iris/source/_includes/subscribe.html.</p>
</li>
<li>
<h4 id="configurate-which-social-media-account-can-share-your-blog-post">Configurate which social media account can share your blog post</h4>
<p><code class="highlighter-rouge">
#share
email-share: true
fb-share: true
twitter-share: true
linkedin-share: true
reddit-share: false
google-plus-share: true
tumblr-share: false
pinterest-share: false
</code>
You can simply change the value to true or false, you can turn share icons on or off for your blog posts.</p>
</li>
<li>
<h4 id="configurate-how-many-posts-in-one-page">Configurate how many posts in one page</h4>
<p><code class="highlighter-rouge">
paginate: 2
</code>
Currently it only displays two posts per page. If it is more than two posts in the post folder, ‘Order Post’ button will appear and navigate users to more posts. You can just change it to the suitable number for your site.</p>
</li>
<li>
<h4 id="configurate-the-dynamic-typing-text-at-home-page">Configurate the dynamic typing text at home page</h4>
<p><code class="highlighter-rouge">
lines:
- text: "&lt;span&gt;The best preparation for tomorrow is doing your best today.&lt;/span&gt;"
- text: "&lt;span&gt;Without documentation and test cases, my 'masterpiece' is my own graveyard. -xunaxu&lt;/span&gt;"
</code>
Leave &lt;span&gt; in and replace any text you want, you can also add more lines too.</p>
</li>
</ul>
</li>
<li>
<h3 id="update-color-theme">Update Color Theme</h3>
<p>Not everyone likes pink and purple. You certainly can change them. The file is located at Jekyll-Iris/source/_sass/_variables.scss
You only need to run ‘jekyll serve’ for _config.yml. For others files such as sass files, all you need to do is to refresh the web browser to see changes.</p>
<div class="expand-div">Having trouble? Have a look at my screen, it may help. <button class="toggle-button">expand</button> <div class="expandable" expanded="false">
<img src="/assets/images/sass_variables.jpg" alt="Find variables.sass file in source folder" />
</div></div>
<p><code class="highlighter-rouge">
$primary-color: #7E57C2;
$secondary-color: #F48FB1;
</code>
You can change primary and secondary color here. Primary color is purple, and secondary color is pink in this theme. Blue and green may go well too.</p>
</li>
</ul>
<h2 id="step-3-writing-your-first-post">Step 3: Writing Your First Post</h2>
<p>You may be happy with the site and decide to write a first blog post, or you may want to customise more, useful tips down the bottom of the page may help you to get started.</p>
<ol>
<li>
<h4 id="make-a-new-file">Make a new file</h4>
<p>Navigate to the _post folder located at Jekyll-Iris/source/_posts, then create a new file named in a format as ‘yyyy-mm-dd-fileName.md’ or ‘yyyy-mm-dd-fileName.markdown’, For example, ‘2016-10-21-how to set up a blog site using Jekyll and GitHub.md’. <strong>The date in the file name is important, can not be omitted</strong>.</p>
<div class="expand-div">Having trouble? Have a look at my screen, it may help. <button class="toggle-button">expand</button> <div class="expandable" expanded="false">
<img src="/assets/images/new_file.jpg" alt="Create a blog post in _post folder" />
</div></div>
</li>
<li>
<h4 id="all-posts-begin-with-this-exact-format">All posts begin with this exact format:</h4>
<div class="highlighter-rouge"><pre class="highlight"><code> ---
layout: post
title: "how to blah"
permalink: "how to blah"
date: 2016-10-21
---
your post content starts here!
</code></pre>
</div>
<p>layout: You can refer any layout from Jekyll-Iris/source/_layout folder. In this theme, you only use the post layout.
title: Post title
permalink: This needs to be unique, it will become a part of the url
date: Posts are sorted by the date in a descendant order.</p>
</li>
<li>
<h4 id="write-the-content">Write the content</h4>
<p>You can use markdown syntax and/or a normal html syntax to write blog content. Once you are familiar with markdown syntax, it is faster to write your posts compared with html syntax.</p>
<div class="expand-div">Having trouble? Have a look at my screen, it may help. <button class="toggle-button">expand</button> <div class="expandable" expanded="false">
<img src="/assets/images/syntax.jpg" alt="Markdown and html syntax as an example" />
</div></div>
<div class="hint"><strong> Useful Tips &gt; </strong>
<a href="https://guides.github.com/features/mastering-markdown/">A Markdown Guide - Mastering Markdown</a> is always handy.
</div>
<p>To highlight code syntax, please using Jekyll highlight below (no ‘\’ required ).
<code class="highlighter-rouge">\{\% highlight css %}
\{\% endhighlight %}
</code></p>
</li>
</ol>
<p><br /></p>
<h2 id="step-4-deployment">Step 4: Deployment</h2>
<ol>
<li>
<h4 id="get-a-github-pages">Get a GitHub Pages</h4>
<p>Create a GitHub repository named yourUserName.github.io. Having trouble? Follow steps at <a href="https://pages.github.com/">GitHub Pages</a>.</p>
</li>
<li>
<h4 id="update-variables-in-configyml">Update Variables in _config.yml</h4>
<p>Now you have a web page hosted at GitHub. There are a couple of more things we need to do before deploying your Jekyll site into the repository. Back to _config.yml, we need to change two variables: url and baseurl. url should be your GitHub page as yourUserName.github.io. and baseurl should be empty. Your site will be hosted at this url ‘yourUserName.github.io’ after deployment.</p>
</li>
<li>
<h4 id="deploy-to-github">Deploy to GitHub</h4>
<p>Finally, it is deployment time. How exciting! The site will be published and we will find out if it s going to work or not. The deploy command lines are below, you just need to replace ‘yourAccountName’ in the repository address.
<code class="highlighter-rouge">cd _site
git init
git add --all
git commit -m "Deploy to GitHub Pages"
git push --force --quiet "https://github.com/yourAccountName/yourAccountName.github.io.git" master
</code></p>
</li>
</ol>
<p>Congratulations! Your site should be live at this address, https://yourUserName.github.io.</p>
<p><br /></p>
<h2 id="step-5--getting-a-customised-domain">Step 5: Getting a Customised Domain</h2>
<p>Great news, you have spent absolutely zero money to own a blog site so far. You maybe happy with a generic github domain, as yourUserName.github.io, but you may want to have a domain ending with .com, .net, .org etc. Here is a youtube tutorial which helped me to set it up. <a href="https://www.youtube.com/watch?v=CJLb8UUIJPg">How to: Free Website Hosting + Custom Domain with Github Pages</a></p>
<p>Don’t forget to update the url variable in _config.yml to whatever domain name you decided to buy.</p>
<p><br /></p>
<hr />
<h3 id="useful-tips">Useful Tips</h3>
<ul>
<li>
<p>Referring global variables from _config.yml in the source folder using site.variableName. Here is an example, delete any ‘\’ in the code.
<code class="highlighter-rouge">
\{\{ site.author.name }}
</code></p>
</li>
<li>
<p>Debugging: Printing out variables using inspect in Jekyll 3, here is an example, delete any ‘\’ in the code.
<code class="highlighter-rouge">
\{\{ page.url | inspect }}
</code></p>
</li>
<li>
<p>Commenting syntax, delete any ‘\’ in the code example below.
<code class="highlighter-rouge">
\{\% comment %}
blah blah blah
\{\% endcomment %}
</code></p>
</li>
<li>
<p><a href="https://jekyllrb.com/docs/quickstart/">The official Jekyll documentation</a> is highly recommend to have a look if you want to edit the source folder.</p>
</li>
</ul>
<p><br /></p>
</description>
<pubDate>Fri, 21 Oct 2016 00:00:00 +1030</pubDate>
<link>https://www.xunaxu.com/How_To_Set_Up_Your_Blog_Site_Using_Jekyll_and_GitHub_Pages</link>
<guid isPermaLink="true">https://www.xunaxu.com/How_To_Set_Up_Your_Blog_Site_Using_Jekyll_and_GitHub_Pages</guid>
</item>
</channel>
</rss>