web/_site/posts/getting-started/index.html
2024-11-15 17:29:28 +00:00

7 lines
36 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html><html lang="en" ><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="theme-color" media="(prefers-color-scheme: light)" content="#f7f7f7" /><meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1b1b1e" /><meta name="mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /><meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1, shrink-to-fit=no, viewport-fit=cover" /><meta name="generator" content="Jekyll v4.3.4" /><meta property="og:title" content="Getting Started" /><meta name="author" content="cotes" /><meta property="og:locale" content="en" /><meta name="description" content="Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server." /><meta property="og:description" content="Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server." /><link rel="canonical" href="https://asandikci.com/posts/getting-started/" /><meta property="og:url" content="https://asandikci.com/posts/getting-started/" /><meta property="og:site_name" content="Aliberk Sandıı" /><meta property="og:type" content="article" /><meta property="article:published_time" content="2019-08-09T15:55:00+03:00" /><meta name="twitter:card" content="summary" /><meta property="twitter:title" content="Getting Started" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"cotes"},"dateModified":"2024-08-27T10:18:52+03:00","datePublished":"2019-08-09T15:55:00+03:00","description":"Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server.","headline":"Getting Started","mainEntityOfPage":{"@type":"WebPage","@id":"https://asandikci.com/posts/getting-started/"},"url":"https://asandikci.com/posts/getting-started/"}</script><title>Getting Started | Aliberk Sandıı</title><link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicons/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicons/favicon-16x16.png"><link rel="manifest" href="/assets/img/favicons/site.webmanifest"><link rel="shortcut icon" href="/assets/img/favicons/favicon.ico"><meta name="apple-mobile-web-app-title" content="Aliberk Sandıı"><meta name="application-name" content="Aliberk Sandıı"><meta name="msapplication-TileColor" content="#da532c"><meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml"><meta name="theme-color" content="#ffffff"><link rel="preconnect" href="https://fonts.googleapis.com" ><link rel="dns-prefetch" href="https://fonts.googleapis.com" ><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="dns-prefetch" href="https://fonts.gstatic.com" ><link rel="preconnect" href="https://cdn.jsdelivr.net" ><link rel="dns-prefetch" href="https://cdn.jsdelivr.net" ><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-logos@1/assets/font-logos.css" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/all.min.css" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous" /><link rel="stylesheet" href="https://unpkg.com/balloon-css/balloon.min.css" /><link rel="stylesheet" href="/assets/css/jekyll-theme-chirpy.css" /><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Source+Sans+Pro:wght@400;600;700;900&display=swap" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tocbot@4.29.0/dist/tocbot.min.css" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/loading-attribute-polyfill@2.1.1/dist/loading-attribute-polyfill.min.css" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/css/glightbox.min.css" /> <script type="text/javascript"> class ModeToggle { static get MODE_KEY() { return 'mode'; } static get MODE_ATTR() { return 'data-mode'; } static get DARK_MODE() { return 'dark'; } static get LIGHT_MODE() { return 'light'; } static get ID() { return 'mode-toggle'; } constructor() { let self = this;this.sysDarkPrefers.addEventListener('change', () => { if (self.hasMode) { self.clearMode(); } self.notify(); }); if (!this.hasMode) { return; } if (this.isDarkMode) { this.setDark(); } else { this.setLight(); } } get sysDarkPrefers() { return window.matchMedia('(prefers-color-scheme: dark)'); } get isPreferDark() { return this.sysDarkPrefers.matches; } get isDarkMode() { return this.mode === ModeToggle.DARK_MODE; } get hasMode() { return this.mode != null; } get mode() { return sessionStorage.getItem(ModeToggle.MODE_KEY); }get modeStatus() { if (this.hasMode) { return this.mode; } else { return this.isPreferDark ? ModeToggle.DARK_MODE : ModeToggle.LIGHT_MODE; } } setDark() { document.documentElement.setAttribute(ModeToggle.MODE_ATTR, ModeToggle.DARK_MODE); sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE); } setLight() { document.documentElement.setAttribute(ModeToggle.MODE_ATTR, ModeToggle.LIGHT_MODE); sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE); } clearMode() { document.documentElement.removeAttribute(ModeToggle.MODE_ATTR); sessionStorage.removeItem(ModeToggle.MODE_KEY); }notify() { window.postMessage( { direction: ModeToggle.ID, message: this.modeStatus }, '*' ); } flipMode() { if (this.hasMode) { this.clearMode(); } else { if (this.isPreferDark) { this.setLight(); } else { this.setDark(); } } this.notify(); } } const modeToggle = new ModeToggle(); </script><body><aside aria-label="Sidebar" id="sidebar" class="d-flex flex-column align-items-end"><header class="profile-wrapper"> <a href="/" id="avatar" class="rounded-circle"><img src="https://asandikci.com/assets/img/pp.png" width="112" height="112" alt="avatar" onerror="this.style.display='none'"></a> <a class="site-title d-block" href="/">Aliberk Sandıı</a><p class="site-subtitle fst-italic mb-0">Personal Website & Blog</p></header><nav class="flex-column flex-grow-1 w-100 ps-0"><ul class="nav"><li class="nav-item"> <a href="/about/" class="nav-link"> <i class="fa-fw fas fa-info-circle"></i> <span>ABOUT</span> </a><li class="nav-item"> <a href="/now/" class="nav-link"> <i class="fa-fw fa-solid fa-clock"></i> <span>NOW</span> </a><li class="nav-item"> <a href="/categories/" class="nav-link"> <i class="fa-fw fas fa-stream"></i> <span>CATEGORIES</span> </a><li class="nav-item"> <a href="/tags/" class="nav-link"> <i class="fa-fw fas fa-tags"></i> <span>TAGS</span> </a><li class="nav-item"> <a href="/archives/" class="nav-link"> <i class="fa-fw fas fa-archive"></i> <span>ARCHIVES</span> </a><li class="nav-item"> <a href="/donate/" class="nav-link"> <i class="fa-fw fa-solid fa-mug-hot"></i> <span>DONATE</span> </a></ul></nav><div class="sidebar-bottom d-flex flex-wrap align-items-center w-100"> <button type="button" class="btn btn-link nav-link" aria-label="Switch Mode" id="mode-toggle"> <i class="fas fa-adjust"></i> </button> <span class="icon-border"></span> <a href="https://git.asandikci.com/asandikci" aria-label="forgejo" target="_blank" rel="noopener noreferrer" > <i class="fa-solid fa-code-branch"></i> </a> <a href="xmpp:asandikci@aliberksandikci.com.tr" aria-label="xmpp" target="_blank" rel="noopener noreferrer" > <i class="fa fa-xmpp"></i> </a> <a href="javascript:location.href = 'mailto:' + ['contact','aliberksandikci.com.tr'].join('@')" aria-label="email" target="_blank" rel="noopener noreferrer" > <i class="fas fa-envelope"></i> </a> <a href="https://mastodon.social/@asandikci/" aria-label="mastodon" target="_blank" rel="noopener noreferrer me" > <i class="fa fa-mastodon"></i> </a> <a href="https://linkedin.com/in/asandikci" aria-label="linkedin" target="_blank" rel="noopener noreferrer" > <i class="fab fa-linkedin"></i> </a> <a href="https://discord.com/users/987999573479944222" aria-label="discord" target="_blank" rel="noopener noreferrer" > <i class="fa fa-discord"></i> </a> <a href="https://instagram.com/aliberksandikci" aria-label="instagram" target="_blank" rel="noopener noreferrer" > <i class="fa fa-instagram"></i> </a> <a href="https://codeberg.org/asandikci" aria-label="codeberg" target="_blank" rel="noopener noreferrer" > <i class="fl-codeberg"></i> </a> <a href="https://github.com/asandikci" aria-label="github" target="_blank" rel="noopener noreferrer" > <i class="fa-github"></i> </a> <a href="/feed.xml" aria-label="rss" > <i class="fas fa-rss"></i> </a></div></aside><div id="main-wrapper" class="d-flex justify-content-center"><div class="container d-flex flex-column px-xxl-5"><header id="topbar-wrapper" aria-label="Top Bar"><div id="topbar" class="d-flex align-items-center justify-content-between px-lg-3 h-100" ><nav id="breadcrumb" aria-label="Breadcrumb"> <span> <a href="/">Home</a> </span> <span>Getting Started</span></nav><button type="button" id="sidebar-trigger" class="btn btn-link"> <i class="fas fa-bars fa-fw"></i> </button><div id="topbar-title"> Post</div><button type="button" id="search-trigger" class="btn btn-link"> <i class="fas fa-search fa-fw"></i> </button> <search id="search" class="align-items-center ms-3 ms-lg-0"> <i class="fas fa-search fa-fw"></i> <input class="form-control" id="search-input" type="search" aria-label="search" autocomplete="off" placeholder="Search..." > </search> <button type="button" class="btn btn-link text-decoration-none" id="search-cancel">Cancel</button></div></header><div class="row flex-grow-1"><main aria-label="Main Content" class="col-12 col-lg-11 col-xl-9 px-md-4"><article class="px-1" data-toc="true"><header><h1 data-toc-skip>Getting Started</h1><p class="post-desc fw-light mb-4">Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server.</p><div class="post-meta text-muted"> <span> Posted <time data-ts="1565355300" data-df="ll" data-bs-toggle="tooltip" data-bs-placement="bottom" > Aug 9, 2019 </time> </span> <span> Updated <time data-ts="1724743132" data-df="ll" data-bs-toggle="tooltip" data-bs-placement="bottom" > Aug 27, 2024 </time> </span><div class="d-flex justify-content-between"> <span> By <em> </em> </span><div> <span class="readtime" data-bs-toggle="tooltip" data-bs-placement="bottom" title="838 words" > <em>4 min</em> read</span></div></div></div></header><div id="toc-bar" class="d-flex align-items-center justify-content-between invisible"> <span class="label text-truncate">Getting Started</span> <button type="button" class="toc-trigger btn me-1"> <i class="fa-solid fa-list-ul fa-fw"></i> </button></div><button id="toc-solo-trigger" type="button" class="toc-trigger btn btn-outline-secondary btn-sm"> <span class="label ps-2 pe-1">Contents</span> <i class="fa-solid fa-angle-right fa-fw"></i> </button> <dialog id="toc-popup" class="p-0"><div class="header d-flex flex-row align-items-center justify-content-between"><div class="label text-truncate py-2 ms-4">Getting Started</div><button id="toc-popup-close" type="button" class="btn mx-1 my-1 opacity-75"> <i class="fas fa-close"></i> </button></div><div id="toc-popup-content" class="px-4 py-3 pb-4"></div></dialog><div class="content"><h2 id="creating-a-site-repository"><span class="me-2">Creating a Site Repository</span><a href="#creating-a-site-repository" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>When creating your site repository, you have two options depending on your needs:</p><h3 id="option-1-using-the-starter-recommended"><span class="me-2">Option 1. Using the Starter (Recommended)</span><a href="#option-1-using-the-starter-recommended" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>This approach simplifies upgrades, isolates unnecessary files, and is perfect for users who want to focus on writing with minimal configuration.</p><ol><li>Sign in to GitHub and navigate to the <a href="https://github.com/cotes2020/chirpy-starter"><strong>starter</strong></a>.<li>Click the <kbd>Use this template</kbd> button and then select <kbd>Create a new repository</kbd>.<li>Name the new repository <code class="language-plaintext highlighter-rouge">&lt;username&gt;.github.io</code>, replacing <code class="language-plaintext highlighter-rouge">username</code> with your lowercase GitHub username.</ol><h3 id="option-2-forking-the-theme"><span class="me-2">Option 2. Forking the Theme</span><a href="#option-2-forking-the-theme" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>This approach is convenient for modifying features or UI design, but presents challenges during upgrades. So dont try this unless you are familiar with Jekyll and plan to heavily modify this theme.</p><ol><li>Sign in to GitHub.<li><a href="https://github.com/cotes2020/jekyll-theme-chirpy/fork">Fork the theme repository</a>.<li>Name the new repository <code class="language-plaintext highlighter-rouge">&lt;username&gt;.github.io</code>, replacing <code class="language-plaintext highlighter-rouge">username</code> with your lowercase GitHub username.</ol><h2 id="setting-up-the-environment"><span class="me-2">Setting up the Environment</span><a href="#setting-up-the-environment" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>Once your repository is created, its time to set up your development environment. There are two primary methods:</p><h3 id="using-dev-containers-recommended-for-windows"><span class="me-2">Using Dev Containers (Recommended for Windows)</span><a href="#using-dev-containers-recommended-for-windows" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>Dev Containers offer an isolated environment using Docker, which prevents conflicts with your system and ensures all dependencies are managed within the container.</p><p><strong>Steps</strong>:</p><ol><li>Install Docker:<ul><li>On Windows/macOS, install <a href="https://www.docker.com/products/docker-desktop/">Docker Desktop</a>.<li>On Linux, install <a href="https://docs.docker.com/engine/install/">Docker Engine</a>.</ul><li>Install <a href="https://code.visualstudio.com/">VS Code</a> and the <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers">Dev Containers extension</a>.<li>Clone your repository:<ul><li>For Docker Desktop: Start VS Code and <a href="https://code.visualstudio.com/docs/devcontainers/containers#_quick-start-open-a-git-repository-or-github-pr-in-an-isolated-container-volume">clone your repo in a container volume</a>.<li>For Docker Engine: Clone your repo locally, then <a href="https://code.visualstudio.com/docs/devcontainers/containers#_quick-start-open-an-existing-folder-in-a-container">open it in a container</a> via VS Code.</ul><li>Wait for the Dev Containers setup to complete.</ol><h3 id="setting-up-natively-recommended-for-unix-like-os"><span class="me-2">Setting up Natively (Recommended for Unix-like OS)</span><a href="#setting-up-natively-recommended-for-unix-like-os" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>For Unix-like systems, you can set up the environment natively for optimal performance, though you can also use Dev Containers as an alternative.</p><p><strong>Steps</strong>:</p><ol><li>Follow the <a href="https://jekyllrb.com/docs/installation/">Jekyll installation guide</a> to install Jekyll and ensure <a href="https://git-scm.com/">Git</a> is installed.<li>Clone your repository to your local machine.<li>If you forked the theme, install <a href="https://nodejs.org/">Node.js</a> and run <code class="language-plaintext highlighter-rouge">bash tools/init.sh</code> in the root directory to initialize the repository.<li>Run command <code class="language-plaintext highlighter-rouge">bundle</code> in the root of your repository to install the dependencies.</ol><h2 id="usage"><span class="me-2">Usage</span><a href="#usage" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><h3 id="start-the-jekyll-server"><span class="me-2">Start the Jekyll Server</span><a href="#start-the-jekyll-server" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>To run the site locally, use the following command:</p><div class="language-terminal highlighter-rouge"><div class="code-header"> <span data-label-text="Terminal"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
</pre><td class="rouge-code"><pre><span class="gp">$</span><span class="w"> </span>bundle <span class="nb">exec </span>jekyll s
</pre></table></code></div></div><blockquote class="prompt-info"><p>If you are using Dev Containers, you must run that command in the <strong>VS Code</strong> Terminal.</p></blockquote><p>After a few seconds, the local server will be available at <a href="http://127.0.0.1:4000">http://127.0.0.1:4000</a>.</p><h3 id="configuration"><span class="me-2">Configuration</span><a href="#configuration" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>Update the variables in <code class="language-plaintext filepath highlighter-rouge">_config.yml</code> as needed. Some typical options include:</p><ul><li><code class="language-plaintext highlighter-rouge">url</code><li><code class="language-plaintext highlighter-rouge">avatar</code><li><code class="language-plaintext highlighter-rouge">timezone</code><li><code class="language-plaintext highlighter-rouge">lang</code></ul><h3 id="social-contact-options"><span class="me-2">Social Contact Options</span><a href="#social-contact-options" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>Social contact options are displayed at the bottom of the sidebar. You can enable or disable specific contacts in the <code class="language-plaintext filepath highlighter-rouge">_data/contact.yml</code> file.</p><h3 id="customizing-the-stylesheet"><span class="me-2">Customizing the Stylesheet</span><a href="#customizing-the-stylesheet" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>To customize the stylesheet, copy the themes <code class="language-plaintext filepath highlighter-rouge">assets/css/jekyll-theme-chirpy.scss</code> file to the same path in your Jekyll site, and add your custom styles at the end of the file.</p><p>Starting with version <code class="language-plaintext highlighter-rouge">6.2.0</code>, if you want to overwrite the SASS variables defined in <code class="language-plaintext filepath highlighter-rouge">_sass/addon/variables.scss</code>, copy the main SASS file <code class="language-plaintext filepath highlighter-rouge">_sass/main.scss</code> to the <code class="language-plaintext filepath highlighter-rouge">_sass</code> directory in your sites source, then create a new file <code class="language-plaintext filepath highlighter-rouge">_sass/variables-hook.scss</code> and assign your new values there.</p><h3 id="customizing-static-assets"><span class="me-2">Customizing Static Assets</span><a href="#customizing-static-assets" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>Static assets configuration was introduced in version <code class="language-plaintext highlighter-rouge">5.1.0</code>. The CDN of the static assets is defined in <code class="language-plaintext filepath highlighter-rouge">_data/origin/cors.yml</code>. You can replace some of them based on the network conditions in the region where your website is published.</p><p>If you prefer to self-host the static assets, refer to the <a href="https://github.com/cotes2020/chirpy-static-assets#readme"><em>chirpy-static-assets</em></a> repository.</p><h2 id="deployment"><span class="me-2">Deployment</span><a href="#deployment" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>Before deploying, check the <code class="language-plaintext filepath highlighter-rouge">_config.yml</code> file and ensure the <code class="language-plaintext highlighter-rouge">url</code> is configured correctly. If you prefer a <a href="https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites"><strong>project site</strong></a> and dont use a custom domain, or if you want to visit your website with a base URL on a web server other than <strong>GitHub Pages</strong>, remember to set the <code class="language-plaintext highlighter-rouge">baseurl</code> to your project name, starting with a slash, e.g., <code class="language-plaintext highlighter-rouge">/project-name</code>.</p><p>Now you can choose <em>ONE</em> of the following methods to deploy your Jekyll site.</p><h3 id="deploy-using-github-actions"><span class="me-2">Deploy Using Github Actions</span><a href="#deploy-using-github-actions" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>Prepare the following:</p><ul><li>If youre on the GitHub Free plan, keep your site repository public.<li><p>If you have committed <code class="language-plaintext filepath highlighter-rouge">Gemfile.lock</code> to the repository, and your local machine is not running Linux, update the platform list of the lock file:</p><div class="language-console highlighter-rouge"><div class="code-header"> <span data-label-text="Console"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
</pre><td class="rouge-code"><pre><span class="gp">$</span><span class="w"> </span>bundle lock <span class="nt">--add-platform</span> x86_64-linux
</pre></table></code></div></div></ul><p>Next, configure the <em>Pages</em> service:</p><ol><li><p>Go to your repository on GitHub. Select the <em>Settings</em> tab, then click <em>Pages</em> in the left navigation bar. In the <strong>Source</strong> section (under <em>Build and deployment</em>), select <a href="https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow"><strong>GitHub Actions</strong></a> from the dropdown menu.<br /> <a href="//posts/20180809/pages-source-light.png" class="popup img-link light border normal shimmer"><img src="//posts/20180809/pages-source-light.png" alt="Build source" width="375" height="140" loading="lazy"></a> <a href="//posts/20180809/pages-source-dark.png" class="popup img-link dark normal shimmer"><img src="//posts/20180809/pages-source-dark.png" alt="Build source" width="375" height="140" loading="lazy"></a></p><li><p>Push any commits to GitHub to trigger the <em>Actions</em> workflow. In the <em>Actions</em> tab of your repository, you should see the workflow <em>Build and Deploy</em> running. Once the build is complete and successful, the site will be deployed automatically.</p></ol><p>You can now visit the URL provided by GitHub to access your site.</p><h3 id="manual-build-and-deployment"><span class="me-2">Manual Build and Deployment</span><a href="#manual-build-and-deployment" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>For self-hosted servers, you will need to build the site on your local machine and then upload the site files to the server.</p><p>Navigate to the root of the source project, and build your site with the following command:</p><div class="language-console highlighter-rouge"><div class="code-header"> <span data-label-text="Console"><i class="fas fa-code fa-fw small"></i></span> <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button></div><div class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
</pre><td class="rouge-code"><pre><span class="gp">$</span><span class="w"> </span><span class="nv">JEKYLL_ENV</span><span class="o">=</span>production bundle <span class="nb">exec </span>jekyll b
</pre></table></code></div></div><p>Unless you specified the output path, the generated site files will be placed in the <code class="language-plaintext filepath highlighter-rouge">_site</code> folder of the projects root directory. Upload these files to your target server.</p></div><div class="post-tail-wrapper text-muted"><div class="post-meta mb-3"> <i class="far fa-folder-open fa-fw me-1"></i> <a href="//categories/blogging/">Blogging</a>, <a href="//categories/tutorial/">Tutorial</a></div><div class="post-tags"> <i class="fa fa-tags fa-fw me-1"></i> <a href="//tags/getting-started/" class="post-tag no-text-decoration" >getting started</a></div><div class=" post-tail-bottom d-flex justify-content-between align-items-center mt-5 pb-2 " ><div class="license-wrapper"> This post is licensed under <a href="https://creativecommons.org/licenses/by/4.0/"> CC BY 4.0 </a> by the author.</div><div class="share-wrapper d-flex align-items-center"> <span class="share-label text-muted">Share</span> <span class="share-icons"> <a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fasandikci.com%2Fposts%2Fgetting-started%2F" target="_blank" rel="noopener" data-bs-toggle="tooltip" data-bs-placement="top" title="Linkedin" aria-label="Linkedin"> <i class="fa-fw fab fa-linkedin"></i> </a> <script defer type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/share-to-mastodon/+esm"></script> <button class="btn text-start" data-bs-toggle="tooltip" data-bs-placement="top" title="Mastodon" aria-label="Mastodon"> <share-to-mastodon class="share-mastodon" message="Getting%20Started%20-%20Aliberk%20Sand%C4%B1k%C3%A7%C4%B1" url="https%3A%2F%2Fasandikci.com%2Fposts%2Fgetting-started%2F"customInstanceList="[{&quot;label&quot;:&quot;mastodon.social&quot;,&quot;link&quot;:&quot;https://mastodon.social/&quot;},{&quot;label&quot;:&quot;mastodon.online&quot;,&quot;link&quot;:&quot;https://mastodon.online/&quot;},{&quot;label&quot;:&quot;fosstodon.org&quot;,&quot;link&quot;:&quot;https://fosstodon.org/&quot;},{&quot;label&quot;:&quot;mastodon.com.tr&quot;,&quot;link&quot;:&quot;https://mastodon.com.tr/&quot;}]" > <i class="fa-fw fa fa-mastodon"></i> </share-to-mastodon> </button> <a href="https://twitter.com/intent/tweet?text=Getting%20Started%20-%20Aliberk%20Sand%C4%B1k%C3%A7%C4%B1&url=https%3A%2F%2Fasandikci.com%2Fposts%2Fgetting-started%2F" target="_blank" rel="noopener" data-bs-toggle="tooltip" data-bs-placement="top" title="Twitter" aria-label="Twitter"> <i class="fa-fw fa-brands fa-square-x-twitter"></i> </a> <a href="https://www.facebook.com/sharer/sharer.php?title=Getting%20Started%20-%20Aliberk%20Sand%C4%B1k%C3%A7%C4%B1&u=https%3A%2F%2Fasandikci.com%2Fposts%2Fgetting-started%2F" target="_blank" rel="noopener" data-bs-toggle="tooltip" data-bs-placement="top" title="Facebook" aria-label="Facebook"> <i class="fa-fw fab fa-facebook-square"></i> </a> <a href="https://t.me/share/url?url=https%3A%2F%2Fasandikci.com%2Fposts%2Fgetting-started%2F&text=Getting%20Started%20-%20Aliberk%20Sand%C4%B1k%C3%A7%C4%B1" target="_blank" rel="noopener" data-bs-toggle="tooltip" data-bs-placement="top" title="Telegram" aria-label="Telegram"> <i class="fa-fw fab fa-telegram"></i> </a> <a href="https://bsky.app/intent/compose?text=Getting%20Started%20-%20Aliberk%20Sand%C4%B1k%C3%A7%C4%B1%20https%3A%2F%2Fasandikci.com%2Fposts%2Fgetting-started%2F" target="_blank" rel="noopener" data-bs-toggle="tooltip" data-bs-placement="top" title="Bluesky" aria-label="Bluesky"> <i class="fa-fw fa-brands fa-bluesky"></i> </a> <a href="https://www.reddit.com/submit?url=https%3A%2F%2Fasandikci.com%2Fposts%2Fgetting-started%2F&title=Getting%20Started%20-%20Aliberk%20Sand%C4%B1k%C3%A7%C4%B1" target="_blank" rel="noopener" data-bs-toggle="tooltip" data-bs-placement="top" title="Reddit" aria-label="Reddit"> <i class="fa-fw fa-brands fa-square-reddit"></i> </a> <a href="https://www.threads.net/intent/post?text=Getting%20Started%20-%20Aliberk%20Sand%C4%B1k%C3%A7%C4%B1%20https%3A%2F%2Fasandikci.com%2Fposts%2Fgetting-started%2F" target="_blank" rel="noopener" data-bs-toggle="tooltip" data-bs-placement="top" title="Threads" aria-label="Threads"> <i class="fa-fw fa-brands fa-square-threads"></i> </a> <button id="copy-link" aria-label="Copy link" class="btn small" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy link" data-title-succeed="Link copied successfully!" > <i class="fa-fw fas fa-link pe-none fs-6"></i> </button> </span></div></div></div></article></main><aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 mb-5 text-muted"><div class="access"><section id="access-lastmod"><h2 class="panel-heading">Recently Updated</h2><ul class="content list-unstyled ps-0 pb-1 ms-1 mt-2"><li class="text-truncate lh-lg"> <a href="/posts/getting-started/">Getting Started</a><li class="text-truncate lh-lg"> <a href="/posts/tusas-gezisi/">TUSAŞ Gezisi</a><li class="text-truncate lh-lg"> <a href="/posts/pardus-ve-windows/">Pardus/Linux Yanına Windows Kurulumu</a><li class="text-truncate lh-lg"> <a href="/posts/text-and-typography/">Text and Typography</a><li class="text-truncate lh-lg"> <a href="/posts/write-a-new-post/">Writing a New Post</a></ul></section><section><h2 class="panel-heading">Trending Tags</h2><div class="d-flex flex-wrap mt-3 mb-1 me-3"> <a class="post-tag btn btn-outline-primary" href="/tags/duzenlenecek/">duzenlenecek</a> <a class="post-tag btn btn-outline-primary" href="/tags/pardus/">pardus</a> <a class="post-tag btn btn-outline-primary" href="/tags/linux/">linux</a> <a class="post-tag btn btn-outline-primary" href="/tags/tubitak/">tubitak</a> <a class="post-tag btn btn-outline-primary" href="/tags/app-recommendations/">app-recommendations</a> <a class="post-tag btn btn-outline-primary" href="/tags/arch/">arch</a> <a class="post-tag btn btn-outline-primary" href="/tags/debian/">debian</a> <a class="post-tag btn btn-outline-primary" href="/tags/epson/">epson</a> <a class="post-tag btn btn-outline-primary" href="/tags/favicon/">favicon</a> <a class="post-tag btn btn-outline-primary" href="/tags/foss/">foss</a></div></section></div><section id="toc-wrapper" class="ps-0 pe-4"><h2 class="panel-heading ps-3 mb-2">Contents</h2><nav id="toc"></nav></section></aside></div><div class="row"><div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4"><aside id="related-posts" aria-labelledby="related-label"><h3 class="mb-4" id="related-label">Further Reading</h3><nav class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4"><article class="col"> <a href="/posts/customize-the-favicon/" class="post-preview card h-100"><div class="card-body"> <time data-ts="1565454840" data-df="ll" > Aug 10, 2019 </time><h4 class="pt-0 my-2">Customize the Favicon</h4><div class="text-muted"><p>The favicons of Chirpy are placed in the directory assets/img/favicons/. You may want to replace them with your own. The following sections will guide you to create and replace the default favicons...</p></div></div></a></article><article class="col"> <a href="/posts/write-a-new-post/" class="post-preview card h-100"><div class="card-body"> <time data-ts="1565244600" data-df="ll" > Aug 8, 2019 </time><h4 class="pt-0 my-2">Writing a New Post</h4><div class="text-muted"><p>This tutorial will guide you how to write a post in the Chirpy template, and its worth reading even if youve used Jekyll before, as many features require specific variables to be set. Naming and...</p></div></div></a></article><article class="col"> <a href="/posts/text-and-typography/" class="post-preview card h-100"><div class="card-body"> <time data-ts="1565235180" data-df="ll" > Aug 8, 2019 </time><h4 class="pt-0 my-2">Text and Typography</h4><div class="text-muted"><p>Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more.</p></div></div></a></article></nav></aside><nav class="post-navigation d-flex justify-content-between" aria-label="Post Navigation"> <a href="//posts/write-a-new-post/" class="btn btn-outline-primary" aria-label="Older" ><p>Writing a New Post</p></a> <a href="//posts/customize-the-favicon/" class="btn btn-outline-primary" aria-label="Newer" ><p>Customize the Favicon</p></a></nav><footer aria-label="Site Info" class=" d-flex flex-column justify-content-center text-muted flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3 " ><p>© <time>2024</time> <a href="https://git.asandikci.com/asandikci">Aliberk Sandıı</a>. <span data-bs-toggle="tooltip" data-bs-placement="top" title="Except where otherwise noted, the blog posts on this site are licensed under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author." >Some rights reserved.</span></p><p>Using the <a data-bs-toggle="tooltip" data-bs-placement="top" title="v7.1.1" href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener" >Chirpy</a> theme for <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>.</p></footer></div></div><div id="search-result-wrapper" class="d-flex justify-content-center d-none"><div class="col-11 content"><div id="search-hints"><section><h2 class="panel-heading">Trending Tags</h2><div class="d-flex flex-wrap mt-3 mb-1 me-3"> <a class="post-tag btn btn-outline-primary" href="/tags/duzenlenecek/">duzenlenecek</a> <a class="post-tag btn btn-outline-primary" href="/tags/pardus/">pardus</a> <a class="post-tag btn btn-outline-primary" href="/tags/linux/">linux</a> <a class="post-tag btn btn-outline-primary" href="/tags/tubitak/">tubitak</a> <a class="post-tag btn btn-outline-primary" href="/tags/app-recommendations/">app-recommendations</a> <a class="post-tag btn btn-outline-primary" href="/tags/arch/">arch</a> <a class="post-tag btn btn-outline-primary" href="/tags/debian/">debian</a> <a class="post-tag btn btn-outline-primary" href="/tags/epson/">epson</a> <a class="post-tag btn btn-outline-primary" href="/tags/favicon/">favicon</a> <a class="post-tag btn btn-outline-primary" href="/tags/foss/">foss</a></div></section></div><div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div></div></div></div><aside aria-label="Scroll to Top"> <button id="back-to-top" type="button" class="btn btn-lg btn-box-shadow"> <i class="fas fa-angle-up"></i> </button></aside></div><div id="mask" class="d-none position-fixed w-100 h-100 z-1"></div><aside id="notification" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-animation="true" data-bs-autohide="false" ><div class="toast-header"> <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close" ></button></div><div class="toast-body text-center pt-0"><p class="px-2 mb-3">A new version of content is available.</p><button type="button" class="btn btn-primary" aria-label="Update"> Update </button></div></aside><script src="/assets/js/user/copy.js"></script> <script src="https://cdn.jsdelivr.net/combine/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js,npm/loading-attribute-polyfill@2.1.1/dist/loading-attribute-polyfill.umd.min.js,npm/glightbox@3.3.0/dist/js/glightbox.min.js,npm/clipboard@2.0.11/dist/clipboard.min.js,npm/dayjs@1.11.13/dayjs.min.js,npm/dayjs@1.11.13/locale/en.js,npm/dayjs@1.11.13/plugin/relativeTime.js,npm/dayjs@1.11.13/plugin/localizedFormat.js,npm/tocbot@4.29.0/dist/tocbot.min.js"></script> <script src="/assets/js/dist/post.min.js"></script> <script defer src="/app.min.js?baseurl=/&register=true" ></script> <script defer src="analytics.yayindasin.org/script.js" data-website-id="80f4b239-3529-46be-b7a1-df82c6967a87" ></script> <script>SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('search-results'), json: '/assets/js/data/search.json', searchResultTemplate: '<article class="px-1 px-sm-2 px-lg-4 px-xl-0"><header><h2><a href="{url}">{title}</a></h2><div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1"> {categories} {tags}</div></header><p>{snippet}</p></article>', noResultsText: '<p class="mt-5">Oops! No results found.</p>', templateMiddleware: function(prop, value, template) { if (prop === 'categories') { if (value === '') { return `${value}`; } else { return `<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`; } } if (prop === 'tags') { if (value === '') { return `${value}`; } else { return `<div><i class="fa fa-tag fa-fw"></i>${value}</div>`; } } } }); </script>