Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Hugoでサイト作りたい

Avatar for eqs eqs
April 26, 2021

 Hugoでサイト作りたい

昔,身内向けに作ったHugoでサイト作ってGitHub Pagesで公開する手順を説明するための資料

Avatar for eqs

eqs

April 26, 2021
Tweet

More Decks by eqs

Other Decks in Technology

Transcript

  1. Hugoのプロジェクトを作る mysite という名前でHugoのプロジェクトを作るコマンド︓ $ hugo new site mysite 出⼒︓ Congratulations!

    Your new Hugo site is created in C:\Users\<user>\workspace\webpage\mysite. Just a few more steps and you're ready to go: 1. Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/ or create your own with the "hugo new theme <THEMENAME>" command. 2. Perhaps you want to add some content. You can add single files with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>". 3. Start the built-in live server via "hugo server". Visit https://gohugo.io/ for quickstart guide and full documentation. 4/28
  2. Gitのリポジトリとして初期化する 予めGitにユーザ名とメールアドレスを設定しておく $ git config --global user.name "Your GitHub Username"

    $ git config --global user.email "Your GitHub E-mail address" $ git config --list # 設定内容の確認 さっき作った mysite の中に移動して初期化 $ cd mysite $ git init 余計なファイルを消して最初のコミットをする $ del archetypes\default.md $ git status $ git add . $ git commit -m "initial commit." 5/28
  3. テーマを追加する テーマをGitのsubmoduleとして追加する( git submodule ) 解説記事によっては,submoduleを使ってないことがある submoduleにしておく⽅がテーマのバージョンが変わったときの 更新が楽 $ cd

    themes $ git submodule add https://github.com/kakawait/hugo-tranquilpeak-theme.git $ git status # 既にaddされた状態になってるのがわかる $ git commit -m "Add theme" 7/28
  4. CVのページを作る 次のコマンドでページを新しく作る $ hugo new page/cv.md テーマ hugo-tranquilpeak-theme では,ブログ記事以外のページを作る 際,

    page というフォルダの中にmdファイルを⼊れないといけない hugo server を実⾏してから http://localhost:1313/page/cv にアクセス するとさっき作ったCVが⾒られる サーバを⽴ち上げたまま page/cv.md を編集するとすぐに内容が反映さ れる 10/28
  5. ローカルリポジトリをリモートリポジト リにPushする Pushを⾔い換えると,ローカルリポジトリの履歴データベースをリモ ートリポジトリのデータベースにコピーする操作 # Pushする先を設定しておく $ git remote add

    origin https://github.com/eqs/mysite-hugo.git # ローカルのmasterブランチをoriginにPush $ git push origin master .git .git ローカルリポジトリ リモートリポジトリ Push 13/28
  6. GitHub Pagesによるサイト公開の仕組み Webサイトやサービスを公開して誰かが⾒たり使えるようにすること をデプロイとよぶらしい <ユーザ名>.github.io という名前のリポジトリにWebページを置く https://<ユーザ名>.github.io として公開される 個⼈や組織のページ作るのによく使われる あるリポジトリの

    gh-pages という名前のブランチにWebページを置く https://<ユーザ名>.github.io/<リポジトリ名> として公開される ソフトウェアのドキュメントやプロジェクトページを公開するのに 使われる 例︓ https://eqs.github.io/ https://eqs.github.io/Here_are_Dice/ 18/28
  7. サイトをGitHub Pagesで公開したい まず,Hugoのプロジェクトをビルドしてみよう $ hugo public というフォルダの中にサイトのファイルが⽣成されてるはず (このフォルダは .gitignore に⼊ってるのでGitから無視される)

    public の中⾝をリモートリポジトリ <ユーザ名>.github.io にpushすると 公開される .git ローカル リポジトリ リモート リポジトリ (mysite-hugo) Push リモート リポジトリ (<username>.github.io) .git Push .git config.toml content hugoコマンド によるビルド public 20/28
  8. ⾃動デプロイの流れ サイト編集⽤のリポジトリ(mysite-hugo)と公開⽤リポジトリ (<username>.github.io)があるのでこんな構成になってる .git ローカル リポジトリ リモート リポジトリ (mysite-hugo) Push

    クラウド上の 仮想環境 Clone .git config.toml content hugoコマンド によるビルド public リモート リポジトリ (<username>.github.io) .git Push .git config.toml content 23/28
  9. ワークフロー name: github pages on: push: branches: master jobs: deploy:

    name: Build Hugo Site runs-on: ubuntu-18.04 steps: - name: Install Hugo env: HUGO_VERSION: 0.74.1 run: | mkdir ~/hugo cd ~/hugo curl -L "https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_${HUGO_VERSION}_Linux-64bit.tar.gz" --output hugo.tar.gz tar -xvzf hugo.tar.gz sudo mv hugo /usr/local/bin - name: Checkout master branch uses: actions/checkout@v2 with: ref: master path: main submodules: true - name: Checkout eqs.github.io uses: actions/checkout@v2 with: repository: eqs/eqs.github.io ref: master path: gh-pages submodules: true - name: Hugo Build run: cd main && hugo - name: Copy files run: cp -rf main/public/* gh-pages/ - name: Commit changes run: | cd gh-pages git config --local user.email "[email protected]" git config --local user.name "GitHub Action" git add -A . if git diff-index --quiet HEAD --; then echo "No changes..." else msg="Rebuilding site `date`" if [ $# -eq 1 ] then msg="$1" fi git commit -m "[CI] build hugo static site $msg" fi - name: Push to the repository uses: cpina/[email protected] env: API_TOKEN_GITHUB: ${{ secrets.API_TOKEN_GITHUB }} with: source-directory: 'gh-pages' destination-github-username: 'eqs' destination-repository-name: 'eqs.github.io' 25/28