카페인 중독자
Projects
microservice project
개발환경이슈
개요
example
week1
week2
Tutorial
Github tutorial
Templete tutorial
comment system
markdown guide
posting guide
visitor counter
cs-note
Abstract
쉬운코드
Web
개요
API
State
Transfer_Resource
dev-log
Home
tech-review
AI
BE
nginx
Communicate
Git
Contact
Copyright © 2024 |
Yankos
Home
>
Tutorial
> Templete tutorial
Now Loading ...
Templete tutorial
Publishing your blog post
This section deals with the step-by-step process of how to write and publish posts on your site. Make _pages directory Create a directory named _pages in root if you do not have it. $ mkdir _pages $ cd _pages Organize your directory structure Our theme provides a hierarchical directory structure. You may create subdirectories (let’s say Category A) in _pages, and then all post entities placed in the Category A directory will be categorized as such. ._pages ├── Category A ├── Category B | ├── Subcatecory b | ├── Subcatecory c Note: Make sure all directories have an index.md inside of them. The next step is, placing index.md files in both _pages directory and its subdirectories. The inner content of each index.md should be just two dashed lines as shown below: --- --- Or you can type the following command from each directory. $ echo -e "---\n---" > index.md Your _pages structure now looks like this: ._pages └── index.md ├── Category A | └── index.md ├── Category B | └── index.md | ├── Subcatecory b | └── index.md | ├── Subcatecory c | └── index.md Write a blog post Create a post with file extension: .md (ex., Post-name.md). All blog post files must begin with front matter typically used to set a title or other metadata. Note that the title and date fields can’t be left blank. For a simple example: --- title: "Example Post" date: "2023-12-01" --- # Welcome **Hello world**, this is my first Jekyll blog post. I hope you like it! Setting a Post Thumbnail Image Add thumbnail attribute to the post that you’d like to show a representative image when rendered. --- title: "Example Post: thumbnail exists" date: "2023-12-02" thumbnail: "/assets/img/thumbnail/bricks.webp" --- Category Tag You can use a grouping of post topics by specifying the tags field. It is helpful when you’d like to search related posts or pin them on the bottom of the page. --- title: "Classic Literature #1: Romeo and Juliet" tags: - book - epic novel - romance date: "2023-12-04" thumbnail: "/assets/img/thumbnail/nightgardenflower.jpg" --- Note that the tags attribute won’t be reflected to the sidebar navigation. Bookmark Setting bookmark: true makes the sidebar nav list display the corresponding post entity. --- title: "Markdown from A to Z" tags: - user manual - markdown - writing format date: "2023-09-05" thumbnail: "https://i.ibb.co/MRzw6T9/sample.webp" bookmark: true --- Example _pages structure Here is the structure introduced in our repo: ._pages └── index.md └── markdown guide.md ├── Category A | └── index.md | ├── Subcatecory a | └── index.md | └── post-01.md | └── post-02.md ├── Category B | └── index.md | ├── Subcatecory b | └── index.md | └── post-03.md | ├── Subsubcategory 1 | └── index.md | └── post-04.md | ├── Subsubcategory 2 | └── index.md | └── post-05.md | ├── Subcatecory c | └── index.md
Tutorial
· 2024-02-04
Manage blog comments with Giscus
Giscus is a free comments system powered without your own database. Giscus uses the Github Discussions to store and load associated comments based on a chosen mapping (URL, pathname, title, etc.). To comment, visitors must authorize the giscus app to post on their behalf using the GitHub OAuth flow. Alternatively, visitors can comment on the GitHub Discussion directly. You can moderate the comments on GitHub. Prerequisites Create a github repo You need a GitHub repository first. If you gonna use GitHub Pages for hosting your website, you can choose the corresponding repository (i.e., [userID].github.io) The repository should be public, otherwise visitors will not be able to view the discussion. Turn on Discussion feature In your GitHub repository Settings, make sure that General > Features > Discussions feature is enabled. Activate Giscus API Follow the steps in Configuration guide. Make sure the verification of your repository is successful. Then, scroll down from the manual page and choose the Discussion Category options. You don’t need to touch other configs. Copy _config.yml Now, you get the giscus script. Copy the four properties marked with a red box as shown below: Paste those values to _config.yml placed in the root directory. # External API giscus_repo: "[ENTER REPO HERE]" giscus_repoId: "[ENTER REPO ID HERE]" giscus_category: "[ENTER CATEGORY NAME HERE]" giscus_categoryId: "[ENTER CATEGORY ID HERE]"
Tutorial
· 2024-02-03
Activate Goat Counter to know how many users visit your blog or posts
GoatCounter is an open source web analytics platform available as a free donation-supported hosted service or self-hosted app. It aims to offer easy to use and meaningful privacy-friendly web analytics as an alternative to Google Analytics or Matomo (in official guide). Getting started Sign up & Get your access code Create new account in here You will access your blog statistics at https://[my-code].goatcounter.com. Add your code to _config.yml goatcounter_code: [my-code] Check if your adblocker is blocking GoatCounter if you don’t see any pageviews. Allow visitor counter Sign in Goat counter from your browser, and enter the Settings tab. Make sure Allow adding visitor counts on your website is checked:
Tutorial
· 2024-02-02
Markdown from A to Z
Headings To create a heading, add number signs (#) in front of a word or phrase. The number of number signs you use should correspond to the heading level. For example, to create a heading level three (<h3>), use three number signs (e.g., ### My Header). Markdown HTML Rendered Output # Header 1 <h1>Header 1</h1> Header 1 ## Header 2 <h2>Header 2</h2> Header 2 ### Header 3 <h3>Header 3</h3> Header 3 Emphasis You can add emphasis by making text bold or italic. Bold To bold text, add two asterisks (e.g., **text** = text) or underscores before and after a word or phrase. To bold the middle of a word for emphasis, add two asterisks without spaces around the letters. Italic To italicize text, add one asterisk (e.g., *text* = text) or underscore before and after a word or phrase. To italicize the middle of a word for emphasis, add one asterisk without spaces around the letters. Blockquotes To create a blockquote, add a > in front of a paragraph. > Yongha Kim is the best developer in the world. > > Factos 👍👀 Yongha Kim is the best developer in the world. Factos 👍👀 Lists You can organize items into ordered and unordered lists. Ordered Lists To create an ordered list, add line items with numbers followed by periods. The numbers don’t have to be in numerical order, but the list should start with the number one. 1. First item 2. Second item 3. Third item 4. Fourth item First item Second item Third item Fourth item Unordered Lists To create an unordered list, add dashes (-), asterisks (*), or plus signs (+) in front of line items. Indent one or more items to create a nested list. * First item * Second item * Third item * Fourth item First item Second item Third item Fourth item Code To denote a word or phrase as code, enclose it in backticks (`). Markdown HTML Rendered Output At the command prompt, type `nano`. At the command prompt, type <code>nano</code>. At the command prompt, type nano. Escaping Backticks If the word or phrase you want to denote as code includes one or more backticks, you can escape it by enclosing the word or phrase in double backticks (``). Markdown HTML Rendered Output ``Use `code` in your Markdown file.`` <code>Use `code` in your Markdown file.</code> Use `code` in your Markdown file. Code Blocks To create code blocks that spans multiple lines of code, set the text inside three or more backquotes ( ``` ) or tildes ( ~~~ ). <html> <head> </head> </html> def foo(): a = 1 for i in [1,2,3]: a += i Horizontal Rules To create a horizontal rule, use three or more asterisks (***), dashes (---), or underscores (___) on a line by themselves. *** --- _________________ Links To create a link, enclose the link text in brackets (e.g., [Blue Archive]) and then follow it immediately with the URL in parentheses (e.g., (https://bluearchive.nexon.com)). My favorite mobile game is [Blue Archive](https://bluearchive.nexon.com). The rendered output looks like this: My favorite mobile game is Blue Archive. Adding Titles You can optionally add a title for a link. This will appear as a tooltip when the user hovers over the link. To add a title, enclose it in quotation marks after the URL. My favorite mobile game is [Blue Archive](https://bluearchive.nexon.com "All senseis are welcome!"). The rendered output looks like this: My favorite mobile game is Blue Archive. URLs and Email Addresses To quickly turn a URL or email address into a link, enclose it in angle brackets. <https://www.youtube.com/> <fake@example.com> The rendered output looks like this: https://www.youtube.com/ fake@example.com Images To add an image, add an exclamation mark (!), followed by alt text in brackets, and the path or URL to the image asset in parentheses. You can optionally add a title in quotation marks after the path or URL.  The rendered output looks like this: Linking Images To add a link to an image, enclose the Markdown for the image in brackets, and then add the link in parentheses. [](https://www.britannica.com/place/La-Mancha) The rendered output looks like this: Escaping Characters To display a literal character that would otherwise be used to format text in a Markdown document, add a backslash (\) in front of the character. \* Without the backslash, this would be a bullet in an unordered list. The rendered output looks like this: * Without the backslash, this would be a bullet in an unordered list. Characters You Can Escape You can use a backslash to escape the following characters. Character Name ` backtick * asterisk _ underscore {} curly braces [] brackets <> angle brackets () parentheses # pound sign + plus sign - minus sign (hyphen) . dot ! exclamation mark | pipe HTML Many Markdown applications allow you to use HTML tags in Markdown-formatted text. This is helpful if you prefer certain HTML tags to Markdown syntax. For example, some people find it easier to use HTML tags for images. Using HTML is also helpful when you need to change the attributes of an element, like specifying the color of text or changing the width of an image. To use HTML, place the tags in the text of your Markdown-formatted file. This **word** is bold. This <span style="font-style: italic;">word</span> is italic. The rendered output looks like this: This word is bold. This word is italic.
Tutorial
· 2023-09-05
<
>
Touch background to close
카페인 중독자
