kunthawat/ALwrity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
eb8784712486e02aed4594216c3dc0db36565f59
ALwrity/pseo_website/_site/posts/getting-started/index.html

1810 lines
40 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>
<!-- `site.alt_lang` can specify a language different from the UI -->
<html lang="en" >
<!-- The Head -->
<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="apple-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"
>
<!-- Begin Jekyll SEO tag v2.8.0 -->
<meta name="generator" content="Jekyll v4.3.2" />
<meta property="og:title" content="Getting Started" />
<meta name="author" content="cotes" />
<meta property="og:locale" content="en" />
<meta name="description" content="Prerequisites" />
<meta property="og:description" content="Prerequisites" />
<link rel="canonical" href="http://localhost:4000/posts/getting-started/" />
<meta property="og:url" content="http://localhost:4000/posts/getting-started/" />
<meta property="og:site_name" content="AI-Takia" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2019-08-09T18:25:00+05:30" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Getting Started" />
<meta name="twitter:site" content="@ajaysi" />
<meta name="twitter:creator" content="@cotes" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"cotes"},"dateModified":"2019-08-09T18:25:00+05:30","datePublished":"2019-08-09T18:25:00+05:30","description":"Prerequisites","headline":"Getting Started","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/posts/getting-started/"},"url":"http://localhost:4000/posts/getting-started/"}</script>
<!-- End Jekyll SEO tag -->
<title>Getting Started | AI-Takia
</title>
<!--
The Favicons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps
Generated by: https://realfavicongenerator.net/
-->
<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="AI-Takia">
<meta name="application-name" content="AI-Takia">
<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" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com" >
<link rel="dns-prefetch" href="https://fonts.googleapis.com" >
<link rel="preconnect" href="https://cdn.jsdelivr.net" >
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net" >
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;700;900&display=swap">
<!-- GA -->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css">
<link rel="stylesheet" href="/assets/css/jekyll-theme-chirpy.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tocbot@4.21.2/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">
<!-- Manific Popup -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.min.css">
<!-- JavaScript -->
<!-- Switch the mode between dark and light. -->
<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() {
if (this.hasMode) {
if (this.isDarkMode) {
if (!this.isSysDarkPrefer) {
this.setDark();
}
} else {
if (this.isSysDarkPrefer) {
this.setLight();
}
}
}
let self = this;
/* always follow the system prefers */
this.sysDarkPrefers.addEventListener('change', () => {
if (self.hasMode) {
if (self.isDarkMode) {
if (!self.isSysDarkPrefer) {
self.setDark();
}
} else {
if (self.isSysDarkPrefer) {
self.setLight();
}
}
self.clearMode();
}
self.notify();
});
} /* constructor() */
get sysDarkPrefers() {
return window.matchMedia('(prefers-color-scheme: dark)');
}
get isSysDarkPrefer() {
return this.sysDarkPrefers.matches;
}
get isDarkMode() {
return this.mode === ModeToggle.DARK_MODE;
}
get isLightMode() {
return this.mode === ModeToggle.LIGHT_MODE;
}
get hasMode() {
return this.mode != null;
}
get mode() {
return sessionStorage.getItem(ModeToggle.MODE_KEY);
}
/* get the current mode on screen */
get modeStatus() {
if (this.isDarkMode || (!this.hasMode && this.isSysDarkPrefer)) {
return ModeToggle.DARK_MODE;
} else {
return 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 another plugins that the theme mode has changed */
notify() {
window.postMessage(
{
direction: ModeToggle.ID,
message: this.modeStatus
},
'*'
);
}
flipMode() {
if (this.hasMode) {
if (this.isSysDarkPrefer) {
if (this.isLightMode) {
this.clearMode();
} else {
this.setLight();
}
} else {
if (this.isDarkMode) {
this.clearMode();
} else {
this.setDark();
}
}
} else {
if (this.isSysDarkPrefer) {
this.setLight();
} else {
this.setDark();
}
}
this.notify();
} /* flipMode() */
} /* ModeToggle */
const modeToggle = new ModeToggle();
</script>
<!-- A placeholder to allow defining custom metadata -->
</head>
<body>
<!-- The Side Bar -->
<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">
</a>
<h1 class="site-title">
<a href="/">AI-Takia</a>
</h1>
<p class="site-subtitle fst-italic mb-0">Latest Blogs on AI tech, Tools & SaaS</p>
</header>
<!-- .profile-wrapper -->
<nav class="flex-column flex-grow-1 w-100 ps-0">
<ul class="nav">
<!-- home -->
<li class="nav-item">
<a href="/" class="nav-link">
<i class="fa-fw fas fa-home"></i>
<span>HOME</span>
</a>
</li>
<!-- the real tabs -->
<li class="nav-item">
<a href="/categories/" class="nav-link">
<i class="fa-fw fas fa-stream"></i>
<span>CATEGORIES</span>
</a>
</li>
<!-- .nav-item -->
<li class="nav-item">
<a href="/tags/" class="nav-link">
<i class="fa-fw fas fa-tags"></i>
<span>TAGS</span>
</a>
</li>
<!-- .nav-item -->
<li class="nav-item">
<a href="/archives/" class="nav-link">
<i class="fa-fw fas fa-archive"></i>
<span>ARCHIVES</span>
</a>
</li>
<!-- .nav-item -->
<li class="nav-item">
<a href="/about/" class="nav-link">
<i class="fa-fw fas fa-info-circle"></i>
<span>ABOUT</span>
</a>
</li>
<!-- .nav-item -->
</ul>
</nav>
<div class="sidebar-bottom d-flex flex-wrap align-items-center w-100">
<button type="button" class="mode-toggle btn" aria-label="Switch Mode">
<i class="fas fa-adjust"></i>
</button>
<span class="icon-border"></span>
<a
href="https://github.com/ajaysi"
aria-label="github"
target="_blank"
rel="noopener noreferrer"
>
<i class="fab fa-github"></i>
</a>
<a
href="https://twitter.com/ajaysi"
aria-label="twitter"
target="_blank"
rel="noopener noreferrer"
>
<i class="fa-brands fa-x-twitter"></i>
</a>
<a
href="javascript:location.href = 'mailto:' + ['example','domain.com'].join('@')"
aria-label="email"
>
<i class="fas fa-envelope"></i>
</a>
<a
href=""
aria-label="linkedin"
target="_blank"
rel="noopener noreferrer"
>
<i class="fab fa-linkedin"></i>
</a>
</div>
<!-- .sidebar-bottom -->
</aside>
<!-- #sidebar -->
<div id="main-wrapper" class="d-flex justify-content-center">
<div class="container d-flex flex-column px-xxl-5">
<!-- The Top Bar -->
<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>
<!-- endof #breadcrumb -->
<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 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">
<!-- Refactor the HTML structure -->
<!--
In order to allow a wide table to scroll horizontally,
we suround the markdown table with `<div class="table-wrapper">` and `</div>`
-->
<!--
Fixed kramdown code highlight rendering:
https://github.com/penibelst/jekyll-compress-html/issues/101
https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
-->
<!-- Change the icon of checkbox -->
<!-- Handle images -->
<!-- CDN URL -->
<!-- Add image path -->
<!-- take out classes -->
<!-- lazy-load images -->
<!-- make sure the `<img>` is wrapped by `<a>` -->
<!-- create the image wrapper -->
<!-- combine -->
<!-- take out classes -->
<!-- lazy-load images -->
<!-- make sure the `<img>` is wrapped by `<a>` -->
<!-- create the image wrapper -->
<!-- combine -->
<!-- Add header for code snippets -->
<!-- Create heading anchors -->
<!-- return -->
<article class="px-1">
<header>
<h1 data-toc-skip>Getting Started</h1>
<div class="post-meta text-muted">
<!-- published date -->
<span>
Posted
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
<time
data-ts="1565355300"
data-df="ll"
data-bs-toggle="tooltip" data-bs-placement="bottom"
>
Aug 9, 2019
</time>
</span>
<!-- lastmod date -->
<div class="d-flex justify-content-between">
<!-- author(s) -->
<span>
By
<em>
<a href=""></a>
</em>
</span>
<!-- read time -->
<!-- Calculate the post's reading time, and display the word count in tooltip -->
<!-- words per minute -->
<!-- return element -->
<span
class="readtime"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="811 words"
>
<em>4 min</em> read</span>
</div>
<!-- .d-flex -->
</div>
<!-- .post-meta -->
</header>
<div class="content">
<h2 id="prerequisites"><span class="me-2">Prerequisites</span><a href="#prerequisites" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<p>Follow the instructions in the <a href="https://jekyllrb.com/docs/installation/">Jekyll Docs</a> to complete the installation of the basic environment. <a href="https://git-scm.com/">Git</a> also needs to be installed.</p>
<h2 id="installation"><span class="me-2">Installation</span><a href="#installation" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2>
<h3 id="creating-a-new-site"><span class="me-2">Creating a New Site</span><a href="#creating-a-new-site" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>There are two ways to create a new repository for this theme:</p>
<ul>
<li><a href="#option-1-using-the-chirpy-starter"><strong>Using the Chirpy Starter</strong></a> - Easy to upgrade, isolates irrelevant project files so you can focus on writing.</li>
<li><a href="#option-2-github-fork"><strong>GitHub Fork</strong></a> - Convenient for custom development, but difficult to upgrade. Unless you are familiar with Jekyll and are determined to tweak or contribute to this project, this approach is not recommended.</li>
</ul>
<h4 id="option-1-using-the-chirpy-starter"><span class="me-2">Option 1. Using the Chirpy Starter</span><a href="#option-1-using-the-chirpy-starter" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4>
<p>Sign in to GitHub and browse to <a href="https://github.com/cotes2020/chirpy-starter"><strong>Chirpy Starter</strong></a>, click the button <kbd>Use this template</kbd> &gt; <kbd>Create a new repository</kbd>, and name the new repository <code class="language-plaintext highlighter-rouge">USERNAME.github.io</code>, where <code class="language-plaintext highlighter-rouge">USERNAME</code> represents your GitHub username.</p>
<h4 id="option-2-github-fork"><span class="me-2">Option 2. GitHub Fork</span><a href="#option-2-github-fork" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h4>
<p>Sign in to GitHub to <a href="https://github.com/cotes2020/jekyll-theme-chirpy/fork">fork <strong>Chirpy</strong></a>, and then rename it to <code class="language-plaintext highlighter-rouge">USERNAME.github.io</code> (<code class="language-plaintext highlighter-rouge">USERNAME</code> means your username).</p>
<p>Next, clone your site to local machine. In order to build JavaScript files later, we need to install <a href="https://nodejs.org/">Node.js</a>, and then run the tool:</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><td class="rouge-code"><pre><span class="gp">$</span><span class="w"> </span>bash tools/init
</pre></td></tr></tbody></table></code></div></div>
<blockquote class="prompt-info">
<p>If you don’t want to deploy your site on GitHub Pages, append option <code class="language-plaintext highlighter-rouge">--no-gh</code> at the end of the above command.</p>
</blockquote>
<p>The above command will:</p>
<ol>
<li>Check out the code to the <a href="https://github.com/cotes2020/jekyll-theme-chirpy/tags">latest tag</a> (to ensure the stability of your site: as the code for the default branch is under development).</li>
<li>Remove non-essential sample files and take care of GitHub-related files.</li>
<li>Build JavaScript files and export to <code class="language-plaintext filepath highlighter-rouge">assets/js/dist/</code>, then make them tracked by Git.</li>
<li>Automatically create a new commit to save the changes above.</li>
</ol>
<h3 id="installing-dependencies"><span class="me-2">Installing Dependencies</span><a href="#installing-dependencies" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>Before running local server for the first time, go to the root directory of your site and run:</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><td class="rouge-code"><pre><span class="gp">$</span><span class="w"> </span>bundle
</pre></td></tr></tbody></table></code></div></div>
<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="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 of <code class="language-plaintext filepath highlighter-rouge">_config.yml</code> as needed. Some of them are typical options:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">url</code></li>
<li><code class="language-plaintext highlighter-rouge">avatar</code></li>
<li><code class="language-plaintext highlighter-rouge">timezone</code></li>
<li><code class="language-plaintext highlighter-rouge">lang</code></li>
</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 turn on/off the specified contacts in file <code class="language-plaintext filepath highlighter-rouge">_data/contact.yml</code>.</p>
<h3 id="customizing-stylesheet"><span class="me-2">Customizing Stylesheet</span><a href="#customizing-stylesheet" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>If you need to customize the stylesheet, copy the theme’s <code class="language-plaintext filepath highlighter-rouge">assets/css/jekyll-theme-chirpy.scss</code> to the same path on your Jekyll site, and then add the custom style at the end of it.</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> into 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 new value.</p>
<h3 id="customing-static-assets"><span class="me-2">Customing Static Assets</span><a href="#customing-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 by file <code class="language-plaintext filepath highlighter-rouge">_data/origin/cors.yml</code>, and you can replace some of them according to the network conditions in the region where your website is published.</p>
<p>Also, if you’d like to self-host the static assets, please refer to the <a href="https://github.com/cotes2020/chirpy-static-assets#readme"><em>chirpy-static-assets</em></a>.</p>
<h3 id="running-local-server"><span class="me-2">Running Local Server</span><a href="#running-local-server" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>You may want to preview the site contents before publishing, so just run it by:</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><td class="rouge-code"><pre><span class="gp">$</span><span class="w"> </span>bundle <span class="nb">exec </span>jekyll s
</pre></td></tr></tbody></table></code></div></div>
<p>After a few seconds, the local service will be published at <em><a href="http://127.0.0.1:4000">http://127.0.0.1:4000</a></em>.</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 the deployment begins, check out the file <code class="language-plaintext filepath highlighter-rouge">_config.yml</code> and make sure the <code class="language-plaintext highlighter-rouge">url</code> is configured correctly. Furthermore, if you prefer the <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 you want to visit your website with a base URL on a web server other than <strong>GitHub Pages</strong>, remember to change the <code class="language-plaintext highlighter-rouge">baseurl</code> to your project name that starts 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-by-using-github-actions"><span class="me-2">Deploy by Using GitHub Actions</span><a href="#deploy-by-using-github-actions" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>There are a few things to get ready for.</p>
<ul>
<li>If you’re on the GitHub Free plan, keep your site repository public.</li>
<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, go the the root of your site and 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><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></td></tr></tbody></table></code></div> </div>
</li>
</ul>
<p>Next, configure the <em>Pages</em> service.</p>
<ol>
<li>
<p>Browse to your repository on GitHub. Select the tab <em>Settings</em>, then click <em>Pages</em> in the left navigation bar. Then, 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>
<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>
</li>
</ol>
<p>At this point, you can go to the URL indicated by GitHub to access your site.</p>
<h3 id="manually-build-and-deploy"><span class="me-2">Manually Build and Deploy</span><a href="#manually-build-and-deploy" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3>
<p>On self-hosted servers, you cannot enjoy the convenience of <strong>GitHub Actions</strong>. Therefore, you should build the site on your local machine and then upload the site files to the server.</p>
<p>Go to the root of the source project, and build your site as follows:</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><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></td></tr></tbody></table></code></div></div>
<p>Unless you specified the output path, the generated site files will be placed in folder <code class="language-plaintext filepath highlighter-rouge">_site</code> of the project’s root directory. Now you should upload those files to the target server.</p>
</div>
<div class="post-tail-wrapper text-muted">
<!-- categories -->
<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>
<!-- tags -->
<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>
<!-- Post sharing snippet -->
<div class="share-wrapper d-flex align-items-center">
<span class="share-label text-muted me-1">Share</span>
<span class="share-icons">
<a
href="https://twitter.com/intent/tweet?text=Getting%20Started%20-%20AI-Takia&url=http%3A%2F%2Flocalhost%3A4000%2Fposts%2Fgetting-started%2F"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Twitter"
target="_blank"
rel="noopener"
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-%20AI-Takia&u=http%3A%2F%2Flocalhost%3A4000%2Fposts%2Fgetting-started%2F"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Facebook"
target="_blank"
rel="noopener"
aria-label="Facebook"
>
<i class="fa-fw fab fa-facebook-square"></i>
</a>
<a
href="https://t.me/share/url?url=http%3A%2F%2Flocalhost%3A4000%2Fposts%2Fgetting-started%2F&text=Getting%20Started%20-%20AI-Takia"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Telegram"
target="_blank"
rel="noopener"
aria-label="Telegram"
>
<i class="fa-fw fab fa-telegram"></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"></i>
</button>
</span>
</div>
</div>
<!-- .post-tail-bottom -->
</div>
<!-- div.post-tail-wrapper -->
</article>
</main>
<!-- panel -->
<aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 mb-5 text-muted">
<div class="access">
<!-- Get the last 5 posts from lastmod list. -->
<!-- The trending tags list -->
<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/getting-started/">getting started</a>
</div>
</section>
</div>
<section id="toc-wrapper" class="ps-0 pe-4">
<h2 class="panel-heading ps-3 pt-2 mb-2">Contents</h2>
<nav id="toc"></nav>
</section>
</aside>
</div>
<div class="row">
<!-- tail -->
<div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4">
<!-- Recommend the other 3 posts according to the tags and categories of the current post. -->
<!-- The total size of related posts -->
<!-- An random integer that bigger than 0 -->
<!-- Equals to TAG_SCORE / {max_categories_hierarchy} -->
<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/mansarovar-trek/" class="post-preview card h-100">
<div class="card-body">
<!--
Date format snippet
See: ${JS_ROOT}/utils/locale-dateime.js
-->
<time
data-ts="1565355300"
data-df="ll"
>
Aug 9, 2019
</time>
<h4 class="pt-0 my-2">Mansarovar Trek</h4>
<div class="text-muted">
<p>
Discover the Ancient Tibetan Tradition of Gurla Parikrama and Mandhata in Simikot, Rara Lake, and Kailash Plateau.
Introduction
Dive into the depths of Tibetan history and tradition with the ancien...
</p>
</div>
</div>
</a>
</article>
</nav>
</aside>
<!-- #related-posts -->
<!-- Navigation buttons at the bottom of the post. -->
<nav class="post-navigation d-flex justify-content-between" aria-label="Post Navigation">
<div class="btn btn-outline-primary disabled" aria-label="Older">
<p>-</p>
</div>
<a
href="/posts/mansarovar-trek/"
class="btn btn-outline-primary"
aria-label="Newer"
>
<p>Mansarovar Trek</p>
</a>
</nav>
<!-- The comments switcher -->
<!-- The Footer -->
<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>2023</time>
<a href="https://twitter.com/username">ajaysi</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 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>
<!-- The Search results -->
<div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
<div class="col-11 content">
<div id="search-hints">
<!-- The trending tags list -->
<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/getting-started/">getting started</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"></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>
<!-- JavaScripts -->
<!-- JS selector for site. -->
<!-- commons -->
<!-- layout specified -->
<!-- image lazy-loading & popup & clipboard -->
<script src="https://cdn.jsdelivr.net/combine/npm/jquery@3.7.1/dist/jquery.min.js,npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js,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/magnific-popup@1.1.0/dist/jquery.magnific-popup.min.js,npm/clipboard@2.0.11/dist/clipboard.min.js,npm/dayjs@1.11.10/dayjs.min.js,npm/dayjs@1.11.10/locale/en.min.js,npm/dayjs@1.11.10/plugin/relativeTime.min.js,npm/dayjs@1.11.10/plugin/localizedFormat.min.js,npm/tocbot@4.21.2/dist/tocbot.min.js"></script>
<script defer src="/assets/js/dist/post.min.js"></script>
<!--
Jekyll Simple Search loader
See: <https://github.com/christian-fei/Simple-Jekyll-Search>
-->
<script>
/* Note: dependent library will be loaded in `js-selector.html` */
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"></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>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink