-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjekyll-magic-wand.html
177 lines (149 loc) · 8.17 KB
/
jekyll-magic-wand.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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html lang="en">
<head>
<base href="./" />
<link rel="shortcut icon" type="image/png" href="/assets/img/favicon.png"/>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Site description">
<meta name="author" content="Biljana Zobenica">
<link rel="canonical" href="/">
<title>Biljana Zobenica</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="assets/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<!-- Custom styles for this theme -->
<link href="assets/css/agency.css" rel="stylesheet">
<!-- Page container change top padding when nav shrinks -->
</head>
<body id="page-top">
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Biljana Zobenica</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto"><li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">Likes</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#timeline">About</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="./blog.html">Blog</a></li>
</ul>
</div>
</div>
</nav>
<section id="content" class="section-top-padding">
<article class="article-top-padding">
<h1>
<a href="https://jekyllrb.com/"
rel="bookmark"
title="Premalink to Jekyll"
target="_blank">
Jekyll as a Magic Wand
</a>
</h1>
<i><time datetime="2014-09-06T00:00:00-04:00"> Wed 14 April 2021</time></i>
<div class="entry-content">
<div class="panel">
<br/>
</div>
<div class="container">
<br/>
<img class="img-responsive" style="width: 70%;" src="/assets/img/blog/jekyll_github.png">
</div>
<hr class="featurette-divider">
<h2>An Intro to the First Steps</h2>
<!-- <div class="highlight"><pre>print 'Hello, World!'</pre></div> -->
<br>
<p>Wellcome to my first blog post! It is about early beginnings of creating my personal website.
<br>
Everything started with Jekyll. But soon enough, Jekyll's got some company called GitHub,
being the main source for all repositories, including this one.</p>
<br>
<p>Here is the summary of the inital steps:</p>
<ul>
<li><strong style="color:#df2344; font-size:18px">Jekyll's Magic</strong></li>
<p>Firstly, I took easy first steps with Jekyll's <a href="https://jekyllrb.com/">quick instructions</a>.
As Jekyll is a Ruby gem, a prerequisite is to <a href="https://jekyllrb.com/docs/installation/windows/">install Ruby+Devkit.</a>
After installing Jekyll and Bundler, which are Ruby gems, the local development of website project was made, still only locally
on the localhost:4000 URL.
<br> Since there are plenty of luring Jekyll themes, for starters, I decided to implement
<a href="http://jekyllthemes.org/themes/agency/">
Jekyll Agency theme</a>.
GitHub pages needed additional adjustments for this theme, so I explored
<a href="https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/adding-a-theme-to-your-github-pages-site-using-jekyll">
GitHub Docs</a>, which offered some comprehensive guidelines related to the topic of using remote theme.
<br> For further customization, I have gotten familiar with <a href="./html-and-css.html">foundations of HTML and CSS (separate post on this topic)</a>.
Also, the great thing is that Jekyll theme is based on Bootstrap and JavaScript librares,
so I had to peek a little bit inside of this various Jekyll magic box as well.
</p>
<li><strong style="color:#df2344; font-size:18px">GitHub as a Host</strong></li>
<p> For live deployment, all contents were pushed to a GitHub repository.
Mine is called <a href="https://github.com/biljana-zobenica/biljana-zobenica.github.io" title="GitHub repo for personal website">
"biljana-zobenica.github.io"</a>.
The part of "github.io" is actually the basic domain which is given by hosting a website to GitHub pages.
While building a website, each version of a project is ready to be commited and tracked by
the version control software - GitHub.
</p>
<li><strong style="color:#df2344; font-size:18px">Go-live</strong> </li>
<p> The website is now live and it's time to build some hands-on projects!
</p>
</ul>
<br>
<p>Stay tuned...</p>
</div>
<hr class="featurette-divider">
<!-- /.entry-content -->
</article>
</section>
</div>
</div>
</div>
<!-- End Navigation -->
<!-- Header -->
<!-- <header class="masthead">
<div class="container">
<div class="intro-text"><div class="intro-lead-in">
<p><strong style="color: #df2344;"></strong> <i style="color:#343a40"></i></p>
</div>
</div>
<div class="intro-heading text-capitalize"></div></div>
</header> -->
<!-- End Header -->
<!-- Articles -->
<!-- <span class="container" id="blog"></span> -->
<!-- End Articles -->
<!-- Footer -->
<footer class="footer" id="footer" style="background-color:white;">
<div class="container">
<div class="row align-items-center">
<div class="col-md-12 text-left">
<span class="copyright">Copyright © Biljana Zobenica 2021-Present</span>
</div>
</div>
</div>
</footer>
<!-- End Footer -->
<!-- Bootstrap core JavaScript -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="assets/js/jquery.easing.min.js"></script>
<!-- Contact form JavaScript -->
<script src="assets/js/jqBootstrapValidation.js"></script>
<script src="assets/js/contact_me.js"></script>
<!-- Custom scripts for this template -->
<script src="assets/js/agency.min.js"></script>
</body>
</html>