tatsuyasusukida/!README-gist-tech-blog.md

## !README-gist-tech-blog.md

      
    Raw
  

              !README-gist-tech-blog.md
            
          
    ✏️ 7 tips for using Gist like a tech blog

About this article

This article describes 7 tips for using GitHub Gist like a tech blog.

Display README.md first
Link to source code
Display image
Display video
Display demo
Give a title
Link to Gist page

The related resources are shown below.

Source code
日本語版 / Japanese version

Display README.md first

You can display the file name at the beginning of the Gist page by starting it with an exclamation point (!), Like! README.md. Also, including slugs like! README-gist-tech-blog.md makes it a little more convenient when searching with Gist. Here is the command to create a file with a name starting with an exclamation point in the terminal:
touch \!README-gist-tech-blog.md
Link to source code

It seems that Gist cannot embed the source code in Markdown. As an alternative, you can include the source code in the same Gist repository and provide the following link.
[Click to go to index.html](#file-index-html)
The result is shown below.
Click to go to index.html
Display image

Gist allows you to include image files in the repository by using the git command from the terminal. An example commands are shown below.
git clone git@gist.github.com:0356b3a2ba3ae9b4885a33efe52b50a5.git gist-tech-blog
cd gist-tech-blog
cp ~/img-01.png ./
git add img-01.png
git commit -m "Add img-01.png"
git push origin main

To refer to the image file included in the repository from Markdown, write as follows.
![The alternative text for the image file](https://gist.github.com/tatsuyasusukida/0356b3a2ba3ae9b4885a33efe52b50a5/raw/img-01.png)
The result is shown below.

It seems that the source code disappears when the size of one image file or the total size of multiple image files exceeds 1MB. If you want to post images, I think it is better to use your own Google Cloud Storage etc.
Display video

In the case of YouTube, you can display the thumbnail of the video and set the link by writing as follows.
[![Video thumbnail: The title of the video](https://img.youtube.com/vi/GPINZB8ENUQ/0.jpg)](https://www.youtube.com/watch?v=GPINZB8ENUQ)
The result is shown below.

Display demo

Although it is HTML only, you can display the demo by replacing github in the URL with githack. It is also possible to load CSS and JavaScript from HTML files.
[Demo](https://gist.githack.com/tatsuyasusukida/0356b3a2ba3ae9b4885a33efe52b50a5/raw/index.html)

The result is shown below.
Demo
Give a title

It is useful to put a title at the beginning of the README as shown below to remember the content of the article. Also, having emoji makes it easier to find them later.
# 😀 7 tips for using Gist like a tech blog

## About this article
...
The description of the Gist repository seems to be the HTML title and description of the Gist page as it is. It is recommended to give the same title to the description of the Gist repository so that the title will be displayed firmly in search results such as Google. An example command is shown below.
gh gist create -wpd "😀 7 tips for using Gist like a tech blog" *

Link to Gist page

It is convenient to have a link to the Gist page at the beginning of the README as shown below so that you can move from the editor to the Gist page.
- [Source code](https://gist.github.com/tatsuyasusukida/0356b3a2ba3ae9b4885a33efe52b50a5#file-index-html)
If you do not create a Gist repository, the URL of the Gist page will not be confirmed, so at first you will leave the URL part blank as shown below.
- [Source code]()
Conclusion

I think Gist has enough features to write tech blog posts. I especially like the fact that the source code and the article can be included in the same repository and that it can be published just by pushing. However, using Gist as a tech blog is a bit discouraging given the following:

Cannot embed the source code
Access analysis is not possible
The list cannot be displayed (although there is a Gist user page...)
Cannot set slug

If you use the Gist repository to embed the source code in a tech blog article, it feels better to include the article as a memo in the Gist repository (although it's annoying because the same article is duplicated).
Gist is also very useful for stocking articles for tech blogs. I will continue to use Gist habitually. If you know any useful techniques for GitHub, Gist, Markdown, etc., we would appreciate your guidance and comments, and any other comments are welcome. Thank you for reading!

  
## img-01.png

      
    Raw
  

              img-01.png
            
          
## index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gistを技術ブログのように使うコツ6選</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Gistを技術ブログのように使うコツ6選</h1>
    <script src="main.js"></script>
  </body>
</html>

## main.js
var p = document.createElement('p');
p.innerHTML = 'このテキストはJavaScriptによって追加されました。';
document.body.appendChild(p);

## style.css
body {
  background: #ccc;
}
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Gistを技術ブログのように使うコツ6選</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<h1>Gistを技術ブログのように使うコツ6選</h1>
	<script src="main.js"></script>
	</body>
	</html>
	var p = document.createElement('p');
	p.innerHTML = 'このテキストはJavaScriptによって追加されました。';
	document.body.appendChild(p);