8 lines
36 KiB
HTML
8 lines
36 KiB
HTML
|
<!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ıkçı" /><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ıkçı</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ıkçı"><meta name="application-name" content="Aliberk Sandıkçı"><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.jsde
|
|||
|
|
</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 theme’s <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 site’s 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 don’t 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
|
|||
|
|
</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 project’s 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="[{"label":"mastodon.social","link":"https://mastodon.social/"},{"label":"mastodon.online","link":"https://mastodon.online/"},{"label":"fosstodon.org","link":"https://fosstodon.org/"},{"label":"mastodon.com.tr","link":"https://mastodon.com.tr/"}]" > <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-
|