8 lines
14 KiB
HTML
8 lines
14 KiB
HTML
<!DOCTYPE html> <html lang="en-US"> <head prefix="og:http://ogp.me/ns#"> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="mobile-web-app-capable" content="yes" /> <meta name="p:domain_verify" content="74b28158c46b8035f8f4a5ba032e51b2" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="application-name" content="Klise Theme" /> <meta name="apple-mobile-web-app-status-bar-style" content="#fff" /> <meta name="apple-mobile-web-app-title" content="Klise Theme" /> <title> How this site was born 👶 - Klise Theme </title> <link rel="alternate" href="http://localhost:4000/how-this-site-was-made/" hreflang="en-US" /> <link rel="canonical" href="http://localhost:4000/how-this-site-was-made/" /> <meta name="description" content="All the services are free, a source code this site placed on github repository and intergration with netlify service, another service that you can use is github page for hosting your own static site." /> <meta name="referrer" content="no-referrer-when-downgrade" /> <meta property="fb:app_id" content="" /> <meta property="og:site_name" content="How this site was born 👶 | username" /> <meta property="og:title" content="How this site was born 👶 | username" /> <meta property="og:type" content="website" /> <meta property="og:url" content="http://localhost:4000/how-this-site-was-made/" /> <meta property="og:description" content="All the services are free, a source code this site placed on github repository and intergration with netlify service, another service that you can use is github page for hosting your own static site." /> <meta property="og:image" content="http://localhost:4000/assets/img/ogp.png" /> <meta property="og:image:width" content="640" /> <meta property="og:image:height" content="640" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:title" content="How this site was born 👶 | username" /> <meta name="twitter:url" content="http://localhost:4000/how-this-site-was-made/" /> <meta name="twitter:site" content="@username" /> <meta name="twitter:creator" content="@username" /> <meta name="twitter:description" content="All the services are free, a source code this site placed on github repository and intergration with netlify service, another service that you can use is github page for hosting your own static site." /> <meta name="twitter:image" content="http://localhost:4000/assets/img/ogp.png" /> <link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="Klise Theme" /> <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png" /> <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicons/android-chrome-96x96.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png" /> <link rel="manifest" href="/assets/favicons/site.webmanifest" /> <link rel="mask-icon" href="/assets/favicons/safari-pinned-tab.svg" color="#5bbad5" /> <meta name="apple-mobile-web-app-title" content="Mahendrata" /> <meta name="application-name" content="Mahendrata" /> <meta name="msapplication-TileColor" content="#da532c" /> <meta name="theme-color" content="#2c2c2c" /> <link rel="stylesheet" href="/assets/css/style.css" /> </head> <body> <header class="navbar" role="navigation"> <nav class="menu"> <input type="checkbox" id="menu-trigger" class="menu-trigger" /> <label for="menu-trigger"> <span class="menu-icon"> <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 512 512'><path d='M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z'/></svg> </span> </label> <a id="mood"> <svg class="mood-sunny" xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 512 512'><title>LIGHT</title><line x1='256' y1='48' x2='256' y2='96' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='256' y1='416' x2='256' y2='464' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='403.08' y1='108.92' x2='369.14' y2='142.86' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='142.86' y1='369.14' x2='108.92' y2='403.08' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='464' y1='256' x2='416' y2='256' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='96' y1='256' x2='48' y2='256' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='403.08' y1='403.08' x2='369.14' y2='369.14' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='142.86' y1='142.86' x2='108.92' y2='108.92' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><circle cx='256' cy='256' r='80' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/></svg> <svg class="mood-moon" xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 512 512'><title>DARK</title><line x1='256' y1='48' x2='256' y2='96' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='256' y1='416' x2='256' y2='464' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='403.08' y1='108.92' x2='369.14' y2='142.86' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='142.86' y1='369.14' x2='108.92' y2='403.08' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='464' y1='256' x2='416' y2='256' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='96' y1='256' x2='48' y2='256' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='403.08' y1='403.08' x2='369.14' y2='369.14' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='142.86' y1='142.86' x2='108.92' y2='108.92' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><circle cx='256' cy='256' r='80' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/></svg> </a> <div class="trigger"> <div class="trigger-container"> <a class="menu-link" href="/">home</a> <a class="menu-link" href="/about/">about</a> <a class="menu-link" href="/notes/">notes</a> <a class="menu-link rss" href="/feed.xml"> <svg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 512 512' fill='#ED812E'><title>RSS</title><path d='M108.56,342.78a60.34,60.34,0,1,0,60.56,60.44A60.63,60.63,0,0,0,108.56,342.78Z'/><path d='M48,186.67v86.55c52,0,101.94,15.39,138.67,52.11s52,86.56,52,138.67h86.66C325.33,312.44,199.67,186.67,48,186.67Z'/><path d='M48,48v86.56c185.25,0,329.22,144.08,329.22,329.44H464C464,234.66,277.67,48,48,48Z'/></svg> </a> </div> </nav> </header> <div class="wrapper post"> <main class="page-content" aria-label="Content"> <article itemscope itemtype="https://schema.org/BlogPosting"> <header class="header"> <div class="tags"> <span itemprop="keywords"> <a class="tag" href="/tags/#blog">BLOG</a>, <a class="tag" href="/tags/#netlify">NETLIFY</a>, <a class="tag" href="/tags/#jekyll">JEKYLL</a>, <a class="tag" href="/tags/#github">GITHUB</a> </span> </div> <h1 class="header-title" itemprop="headline">How this site was born 👶</h1> <div class="post-meta"> <time datetime="2018-09-28T09:45:47+07:00" itemprop="datePublished"> Sep 28, 2018 </time> <span itemprop="author" itemscope itemtype="https://schema.org/Person"> <span itemprop="name">Klisé Theme</span> </span> <time hidden datetime="2019-08-29T09:24:47+07:00" itemprop="dateModified"> Sep 28, 2018 </time> <span hidden itemprop="publisher" itemtype="Person">Klisé Theme</span> <span hidden itemprop="image"></span> <span hidden itemprop="mainEntityOfPage"><p>The website was made using Jekyll the one of open source static sites generator, and using my own simple theme, I called <a href="https://github.com/piharpi/klise">klisé</a>.</p> </span> </div> </header> <div class="page-content" itemprop="articleBody"> <p>The website was made using Jekyll the one of open source static sites generator, and using my own simple theme, I called <a href="https://github.com/piharpi/klise">klisé</a>.</p><hr /> <p>All the services are free, source code the site was placed on my <a href="https://github.com/piharpi/mahendrata.now.sh">github</a> repository and intergration with <del><a href="https://netlify.com">netlify</a></del> service, another service that you can use is <a href="https://pages.github.com/">github page</a> for hosting your own static site.</p><hr /> <h4 id="lets-do-this"> <a href="#lets-do-this" class="anchor-head"></a> Let’s do this </h4> <p>So, before we start create a site, you need some tools, you can self paced for how to installing each tools, on this guide i’m just want to show you how to install jekyll and deploying in netlify, but make sure you have each tools below.</p> <h4 id="prerequisites"> <a href="#prerequisites" class="anchor-head"></a> Prerequisites </h4> <p>Requirements before we doing magic show.</p> <ul> <li><a href="https://www.ruby-lang.org/en/downloads/">Ruby</a> programming language</li> <li><a href="https://git-scm.com">Git</a> (version control)</li> <li><a href="https://netlify.com">Netlify</a> and <a href="https://github.com">Github</a> account</li> <li><a href="https://bundler.io">Bundler</a></li> </ul> <h4 id="installation"> <a href="#installation" class="anchor-head"></a> Installation </h4> <p>First, you need some <a href="https://www.staticgen.com/">SSG</a>, there are many kind ssg, but in case i’m using Jekyll cause i’m already familiar with it, open your terminal and type command on below</p> <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>bundle <span class="nb">install </span>jekyll <span class="c"># installing jekyll in your machine</span>
|
||
<span class="nv">$ </span>jekyll new my-site <span class="o">&&</span> <span class="nb">cd </span>my-site <span class="c"># create new jekyll project</span>
|
||
<span class="nv">$ </span>jekyll s <span class="c"># run jekyll server</span>
|
||
</code></pre></div></div> <p>Now, jekyll is running on your local machine, open your browser and go to <code class="highlighter-rouge">localhost:4000</code> is default address from jekyll, press <kbd>CTRL</kbd> + <kbd>C</kbd> to stop the jekyll server.</p> <h4 id="adding-remote-repository"> <a href="#adding-remote-repository" class="anchor-head"></a> Adding remote repository </h4> <p>Before we adding remote repository, you must have <a href="https://github.com/new">github</a> repository, if already have repository, just add github remote address to your local folder, with the following commands</p> <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>git init <span class="c"># initializing project folder</span>
|
||
<span class="nv">$ </span>git remote add origin https://github.com/YOUR-USERNAME/YOUR-REPO.git <span class="c"># change UPPERCASE with your own!</span>
|
||
<span class="nv">$ </span>git add <span class="nt">-A</span> <span class="o">&&</span> git commit <span class="nt">-m</span> <span class="s2">"Initialize"</span> <span class="o">&&</span> git push <span class="nt">-u</span> origin master <span class="c"># push code to github</span>
|
||
</code></pre></div></div> <p>Now check your github repository, make sure the files is uploaded correctly.</p> <h4 id="deploying-to-netlify"> <a href="#deploying-to-netlify" class="anchor-head"></a> Deploying to netlify </h4> <p>Go <a href="https://netlify.com">netlify</a> dashboard, and following this step.</p> <ol> <li>click <code class="highlighter-rouge">new site from git</code>, then choose <code class="highlighter-rouge">Github</code>.</li> <li>then choose your repository where is the jekyll sources uploaded.</li> <li>netlify smart enough to configuring, we just need’s are hosting’s are hosting’s are hosting’s are hosting to click <code class="highlighter-rouge">Deploy site button</code>.</li> </ol> <p>Wait for moment, and voila..! your site’s are hosting and using <code class="highlighter-rouge">.netlify.com</code> tld, if your website wants to look professional, just buy a domain from your favorite domain store. or if you the first time, I advice using namecheap.com<em>(isn’t sponsor)</em> *based on my experienced it provides good service and have various TLDs.</p> <p>So, what you waiting for, just create your own website for free.</p> </div> </article> </main> <small class="post-updated-at">updated_at 29-08-2019</small> <nav class="post-nav"> <a class="post-nav-item post-nav-prev" href="/python-notes-from-Intro-to-machine-learning/" > <div class="nav-arrow">Previous</div> <span class="post-title">Python Notes from Intro to Machine Learning</span> </a> <a class="post-nav-item post-nav-next" href="/apa-itu-shell/"> <div class="nav-arrow">Next</div> <span class="post-title">What is a shell? 🐚 adalah kerang ajaib?</span> </a> </nav> </div> <footer class="footer"> <a class="footer_item" href="/thanks">ack.</a> <a class="footer_item" href="/resume">resume</a> <a class="footer_item" href="/feed.xml">rss</a> <span class="footer_item">© 2020</span> <small class="footer_theme-copyright"> <!-- Klisé Theme: https://github.com/piharpi/jekyll-klise --> <a href="https://github.com/piharpi/jekyll-klise" target="_blank">klisé</a> theme on <a href="https://jekyllrb.com" target="_blank">jekyll</a> </small> </footer> <script src="/assets/js/main.js" defer="defer"></script> <script src="/assets/js/galite.js"></script> <script> var galite = galite || {}; galite.UA = ""; </script> </body> </html>
|