How to setup a typescript Project as fast as possible

Simply type in

1

npm gts init

And then, boom, well-done, a well typescript project is initialized, and it’s very nice.

Some useful knowledge about this quick generate

Compile

1

npm run compile

Run

1

node <file_dir>/<file_name>

for more info, check out gts offical documentation.

Or you meant to start a minimal typescript project

You can use my minimal typescript project starter

Quick start

1. clone this project

1

git clone https://github.com/ryankert01/ts-starter.git

2. initialize

1

npm i

Scripts

1
2
3

yarn compile   // compile ts file
yarn dev       // watch ts file
yarn start     // run this project

End of story…

Why?

I was priviously using jekyll TeXt theme, but the code block shows too small to watch code. Also, I don’t really understand the coding language jekyll is using, so I decide to switch to a more familier javascript framework, hexo.

What is Hexo?

Hexo is a website generator to generate website based on Markdown file, and it is highly customizable.

Install Hexo

Preriquisite: Git and node.js.

Install Hexo CLI

1

npm install -g hexo-cli

and, we can execute Hexo commands in this way:

1

npx hexo <command>

Install Starter Package & Dependencies

1
2
3

npx hexo init blog
cd blog
npm install

Server

Run these commands, and you will see a starter website is generated by Hexo.

1
2

npx hexo g
npx hexo s

Writing

In sourse/__post folder, we already have a hello-world.md post that is from Hexo starter package. Basically, we can imitate that first.

For detail Infomation, visit Hexo Doc front-matter

Example:

1
2
3
4
5
6
7
8
9

---
title: Switching to Hexo!
tags: [Hexo]
categories: [Static Website Generator]
---

# header

your blog post

Theme

You can search for theme you like on This Site or Github, but in hexo, I will generally recommand next. It’s not only because it’s highly customizable, but for its already built nice plugins.

Deploy

Use

1

npx hexo g

It will generate html file that you might want to deploy to github in pulic directory, and you can use Github Pages to handle that.

Github Pages Tutorial

Auto Deploy with Github Actions

Baically, you might find it annoying to generate html file everytime you want to make a change. Github can handle that for me.

1. Uplaod your whole project to Github.
2. add a file to your repository, .github/workflows/deploy.yml

.github/workflows/deploy.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

name: Pages

on:
  push:
    branches:
      - main # default branch

jobs:
  pages:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js 16.x
        uses: actions/setup-node@v2
        with:
          node-version: "16"
      - name: Cache NPM dependencies
        uses: actions/cache@v2
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public
          cname: # if you use custom domain, enter your hosting domain for this project.

To crawl thumbnails on YouTube, we use a interesting website that YouTube made for us for quick request for thumnail image.

1

https://i.ytimg.com/vi/{YouTube_video_id}/maxresdefault.jpg

Firstly, we convert YouTube url to id by following code, and use “get” methed request the image.

Then, we stored the image in folder you like
using imagedown(YouTube_video_id, 'folder_name')

If there’s no such folder, then it will auto generate a new one.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import re
import requests
import os

#urls to id
url = "YouTube URL"
exp = "^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*"
s = re.findall(exp,url)[0][-1]
thumbnail = f"https://i.ytimg.com/vi/{s}/maxresdefault.jpg"

#image scraping
def imagedown(url, folder):
    try:
        os.mkdir(os.path.join(os.getcwd(), folder))
    except:
        pass
    os.chdir(os.path.join(os.getcwd(), folder))

    name = url
    link = url
    with open(name.replace(' ', '-').replace('/', '') + '.jpg', 'wb') as f:
        im = requests.get(link)
        f.write(im.content)
        print('Writing: ', name)

imagedown(thumbnail, 'image')

Credits: StackoverFlow and jhnwr

Download Google font and use it in offline html

Steps required

1. find your beloved font at google fonts.
2. select all font styles that you might want to have.
3. find its’ url ex:https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap, which will be inTo embed a font, copy the code into the <head> of your html/<link>
4. open it in the browser and convert it to example.css
5. make a directory “fonts” ex:mkdir fonts
6. make a main.py in same directory.
7. paste the automate python code in it.
8. comfirm that this directory has three object:
   • main.py
   • empty directory fonts
   • example.css
9. run the python code python main.py
10. embed example.css in your html file

main.py

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import requests
import re

with open("example.css", "r") as f:
    text = f.read()
    urls = re.findall(r'(https?://[^\)]+)', text)

for url in urls:
    filename = url.split("/")[-1]
    r = requests.get(url)
    with open("./fonts/" + filename, "wb") as f:
        f.write(r.content)
    text = text.replace(url, "'./fonts/" + filename +"'")

with open("example.css", "w") as f:
        f.write(text)

credit: duydb, Wytamma Wirth and me who modified it to the better

resourse: https://stackoverflow.com/questions/15930003/downloading-a-google-font-and-setting-up-an-offline-site-that-uses-it