Chen-Chih Technical Note Blog

Tech Notes & Tutorials

0%

Posted on Edited on In

在這篇教學，我想要分享HEXO簡易版本。我在之前有寫ㄧ篇是關於Hexo完整篇，文章太長。如果你不想看那一篇可以看這一篇。在這一篇，我只會分享一些基本指令。

安裝 git

可以到官網下載git:，或是你是Linux/MAC，可以輸入命令方式來安裝如下：

  • Linux (Ubuntu, Debian)：

    $ sudo apt-get install git-core

  • Linux (Fedora, Red Hat, CentOS)

    sudo yum install git-core

  • mac 安裝:

    brew install git

安裝 Hexo

先安裝 node.js

可以到官網下載Node.js，或是你是Linux/MAC，可以輸入命令方式來安裝如下：

  • MAC:

    $ brew update
    $ brew install node

  • Linux(ubuntu)

    $ sudo apt-get install -y nodejs

再安裝 Hexo

$ npm install -g hexo-cli # -g 全域安裝

Read more »

Posted on Edited on In

大家有用過自動安裝window 系統嗎？正常我們都用 ISO光碟片，USB和網路方法安裝OS。可這些方法我們可能要一直按下一步等等。今天我想分享如何用自動化安裝，不需要寫程式，只要把unattend.xml放進我們window ISO 或是USB的根目錄就可以。
這個自動化工具叫做unattend 如果有興趣可以在網路找相關內容。
我會教大家如何建立unattend.xml檔案，他可以幫我們自動建立帳號，切磁區等等。在這分享我沒有教如何分切磁區。

為什麼要做這個？
如果你長期在安裝windowOS我建議可以學會這個，非長方便。

Part 1 : 建立autounattend.xml 檔案。

1. 去windowsafg 網站

2. window 相關設定

用預設的設定即可。You can use the default setting, or use the same setting I set.

  • 我只設定，時間，鍵盤語言，和帳號
  • I only changed time tone, keyboard to US, and account to administrator
    account admin

3.下載autounattend.xml檔案

Download autounattend.xml file. 下載autounattend.xml檔案
downloadfile

Read more »

Posted on Edited on In

遠端桌面連線

我想分享如何設定無密碼，也可以做遠端桌面連線。正常都是我們電腦帳號如果設定無密碼但又想做遠端，需要作揖些設定。

Step1: 請在鍵盤輸入window + r

Step2: 請輸入gpedit.msc

Step3: disable Limit account use of blank password, to enable blank password

blank password

網路磁碟分享

我想分享如何設定無密碼，也可以做網路磁碟分享，這樣可以共享資料夾。

Step1: 建立一個資料夾

Step2: 把資料夾設定權限

Read more »

Posted on Edited on In

Emmet

我想分享一些最常用到的Emmet和VScode相關指令。如果會Emmet我們可以提高我們在編寫HTML的時間。我們不需要打麼長的與法。

1. html初始结構

指令:！ =>tab or enter

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

2. CSS連結

指令: link:css =>tab or enter
在裡面加

1
<link rel="stylesheet" href="style.css">

3.隱式TAG , id（#）,class（.）

  • div tag:.name

    指令: .test

    1
    <div class="test"></div>

  • list tag:

    指令: ul>.test$*3

    1
    2
    3
    4
    5
    <ul>
        <li class="test1"></li>
        <li class="test2"></li>
        <li class="test3"></li>
    </ul>

  • id指令：#

    Ｓyntax:div.idname

    指令:div#test

    1
    <div id="test"></div>

  • class指令.

    Ｓyntax: div.classname

    指令:div.test

    1
    <div class="test"></div>

  • em 和 span :

    Ｓyntax:tag>.class

    指令:em>.class

    1
    <em><span class></span></em>

  • 表格 table

    指令:table>.row>.col 

    1
    2
    3
    4
    5
    <table>
        <tr class="row">
            <td class="col"></td>
        </tr>
    </table>

  • option

    Ｓyntax: select>classname

    指令:select>.test$*5 

    1
    2
    3
    4
    5
    6
    7
    <select name="" id="">
        <option class="test1"></option>
        <option class="test2"></option>
        <option class="test3"></option>
        <option class="test4"></option>
        <option class="test5"></option>
    </select>
Read more »

Posted on Edited on In

＃ 如何使用 Hexo + GitHub Pages 架設個人網誌

什麼是 Hexo？

  • HEXO 是一套 Static Site Generators(SSG)網誌框架工具，只要把建立和編寫 markdown就可以變成轉成靜態網頁。一般都用在架自己的部捼洛客，不用花很多時間設計排版等等。目前最有名的 SSG 有包括: Hexo(node.js 語言)，HUGO(go 語言)，Jekyll(ruby 語言) 等等。
  • 其實就是一個基於 Node.js 開發的網誌框架。具有下列幾項特點：
    • NODE.JS
    • 能夠支援 Markdown 語法解析文章，並透過主題渲染靜態檔案
    • 具有豐富的外掛套件
    • 支援一鍵部署到 GitHub Pages 或 Heroku 等支援靜態網頁的空間

前置作業

安裝需要工具

在開始安裝 Hexo 之前，必須先在電腦安裝下列工具:

  • Node.js

    npm 來安裝所需的套件。你可以把 npm 當作是 linux 的 apt 或 yum。他主要是幫我們安裝 JS 等套件。
  • Linux (Ubuntu, Debian)：

    sudo apt-get install -y nodejs

  • git

    是專們做版本控制的工具。外面有多版本控制，我選用 github，因為他比較多人用，還有他有 GitHub Page 可以幫我們架設網站，又是免費。window 可以用這個 git-bash 來下載git-for-window
  • Linux (Ubuntu, Debian)：

    $ sudo apt-get install git-core

Read more »

Posted on Edited on In ,

Flex Layout 排版 (CSS 格線佈局)

CSS排版有很多不同的排版工具，今天我想介紹FlexBox，也可以叫做flexible。Flexbox 是屬於one dimention ，也就去說你只有一個軸，你不是選擇用row or colomn。我會介紹以下的內容：

  • 父元素/容器属性：
    • flex-direction:
      • row (default)
      • row-reverse
      • column
      • column-reverse
    • flex container(display):
      • flex
      • inline-flex
    • flex-wrap:
      • wrap
      • nowrap (default)
    • justify-content
      • flex-start
      • flex-end
      • center
      • space-around
      • space-between
      • space-evenly
    • align-item
      • stretch
      • lex-start
      • flex-end
      • center
    • Align-Content
      • flex-start
      • flex-end
      • stretch
      • space-around
      • space-between
  • Flex 內元件屬性/子元素：
    • flex-item:
      • flex-grow
      • flex-shrink
      • flex-basis
      • flex (縮寫)
    • order
    • align-self

part 1 基本FLEX相關知識

FlexBox 就是flexible Box，顧名思義就是彈性的盒子。早期我們在排版都是用float，但用起來沒有FlexBox好用。我們有幾個CSS layout，如float,display,Positioning, Flexbox, and grid等等。

Container and items 的差別

  • Container: 就是外容器，你也可以想成它是盒子的外面，或是我喜歡稱他為Parent容器。
  • Items: 就是內容器，你也可以想成它是盒子的裡面，或是我喜歡稱他為Child容器。
    我們來看一下圖你們更了解，這兩個差別:外面綠色就是container(外容器)，裡面橘色就是items()內容器)

這非常重要，這樣你才知道要用那一個容器的元屬性，然後也很好去記，卻步用去蓓背他。

AXIS軸

Read more »

Posted on Edited on In

今天我想在這文章中介紹最常用到的 git 指令。我會介紹我最常用到的指令有：

  • git init
  • git add .
  • git commit -m “message”
  • git push
    以上是我最常用到的。我還想介紹一些關於 git remote 等指令。

基本指令

1. git init 初始化 git

Step1: 建立一個資料夾如：$mkdir test

Step2: 進去目錄 cd test

Step3: 執行 git init就會初始化 git。如果你下 ls-al就可以看所有資料，會有一個 .git 隱藏檔

2. git add 把檔案進索引 index

Step1: 建立檔案 touch hello.py
Step2: 編輯檔案

  • (linux) vim hello.py
  • (window) notepad hello.py
    就加 print("hello world")
    Step3: 把檔案加進索引 git add .
    Step4: 看 git status git status
    他會顯示 stage
Read more »

Posted on Edited on In ,

GRID Layout 排版 (CSS 格線佈局)

  • 現在我們在做網頁排版，最流行都是用 GRID and Flex。想要分享GRID相關設定和用法，在早期都是用position 或float等等來做排版。
  • GRID 是二維CSS格線排版(row and colulmn)，反之Flex只能選用一維(row or colulmn)。

以下是所有GRID Properties ，我整理好分類，這樣才懂或記。如果有學會或用過GRID，會更好理解。

  • Grid Container(parent Properties)
    • 1.display (enable grid propertis 啟動GRID)
    • 2.grid-template
      • grid-template-column
      • grid-template-row
      • grid-template
      • grid-template-areas
    • 3.grid-auto-flow
      • grid-auto-column
      • grid-auto-rows
      • grid-auto-flow

    • 4.gap
      • column-gap
      • row-gap
      • gap
    • 5.Alignment & Spacing
      • within grid cell
        • justify-items
        • align-items
        • place-items
      • within grid container
        • justify-content
        • align-content
        • place-content
  • Grid item(Child Properties)
    • Grid-column-start
    • Grid-column-end
    • Grid-row-start
    • Grid-row-end
    • Grid-column (shorthand)
    • Grid-row (shorthand)
  • Alignment item within Cell
    • Justify-self: alignment along the row axis
    • Align-self: alignment along the column axis
    • Place-self: shorthand for

Part 1: GRID 架構 Structure & Terminology

Container 和 Items 差別：

Grid Container: 盒子的最外層Parent
Grid items: 盒子內層Children
其實跟Flex一樣，都需要有container and items

container and items of GRID

Read more »

Posted on Edited on

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate
Read more »

Posted on Edited on

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate
Read more »