<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>web on shanpu-portal</title>
    <link>https://www.shanpu.info/tags/web/</link>
    <description>Recent content in web on shanpu-portal</description>
    <generator>Hugo -- 0.146.0</generator>
    <language>ja</language>
    <lastBuildDate>Sun, 28 Nov 2021 11:52:08 +0900</lastBuildDate>
    <atom:link href="https://www.shanpu.info/tags/web/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>自分のwebサイトを作って公開する</title>
      <link>https://www.shanpu.info/blogs/20211203_mydomain-web/</link>
      <pubDate>Fri, 03 Dec 2021 00:00:00 +0000</pubDate>
      <guid>https://www.shanpu.info/blogs/20211203_mydomain-web/</guid>
      <description>&lt;p&gt;この度，新しく自分のwebサイトを開設しました．&lt;br&gt;
今後はここを自分のポータルサイト兼ブログサイトとして，のんびり運用していこうと思います．&lt;/p&gt;
&lt;p&gt;さて今回は，このwebサイトの構築について簡単に紹介します。&lt;/p&gt;
&lt;h1 id=&#34;使用ツールサービス&#34;&gt;使用ツール・サービス&lt;/h1&gt;
&lt;p&gt;このような目標のもとツール等々を選びました&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;markdownで記事を書ける&lt;/li&gt;
&lt;li&gt;Gitで管理できる&lt;/li&gt;
&lt;li&gt;コードに変更を加えると自動でデプロイされる&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;そこで選んだツールとサービスはこちら．&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;GitHub
&lt;ul&gt;
&lt;li&gt;記事の管理用&lt;/li&gt;
&lt;li&gt;プライベートリポジトリを立てて，そこで全てのコードと設定ファイルを管理&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Hugo
&lt;ul&gt;
&lt;li&gt;Go製のサイトジェネレータ&lt;/li&gt;
&lt;li&gt;markdownからWebページを生成できる&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Netlify
&lt;ul&gt;
&lt;li&gt;静的サイトホスティングサービス&lt;/li&gt;
&lt;li&gt;作ったサイトの公開用&lt;/li&gt;
&lt;li&gt;GitHubと連動して自動的にデプロイしてくれる&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Google Domains
&lt;ul&gt;
&lt;li&gt;自分のドメイン取得とレコード管理&lt;/li&gt;
&lt;li&gt;今回はもともと持っていた&lt;code&gt;shanpu.info&lt;/code&gt;を使用&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h1 id=&#34;構築手順&#34;&gt;構築手順&lt;/h1&gt;
&lt;h2 id=&#34;webサイトをローカル環境で作る&#34;&gt;Webサイトをローカル環境で作る&lt;/h2&gt;
&lt;p&gt;まずは&lt;a href=&#34;https://gohugo.io/getting-started/installing/&#34;&gt;公式ガイド&lt;/a&gt;を参考にHugoをインストールします．&lt;br&gt;
例えばbrewを使ってこんな感じに&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;
&lt;table style=&#34;border-spacing:0;padding:0;margin:0;border:0;&#34;&gt;&lt;tr&gt;&lt;td style=&#34;vertical-align:top;padding:0;margin:0;border:0;&#34;&gt;
&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code&gt;&lt;span style=&#34;white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f&#34;&gt;1
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td style=&#34;vertical-align:top;padding:0;margin:0;border:0;;width:100%&#34;&gt;
&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-sh&#34; data-lang=&#34;sh&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;$ brew install hugo
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;p&gt;インストールできたら，適当なディレクトリで&lt;code&gt;hugo new site&lt;/code&gt;を使って雛形を生成します．&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;
&lt;table style=&#34;border-spacing:0;padding:0;margin:0;border:0;&#34;&gt;&lt;tr&gt;&lt;td style=&#34;vertical-align:top;padding:0;margin:0;border:0;&#34;&gt;
&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code&gt;&lt;span style=&#34;white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f&#34;&gt;1
&lt;/span&gt;&lt;span style=&#34;white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f&#34;&gt;2
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td style=&#34;vertical-align:top;padding:0;margin:0;border:0;;width:100%&#34;&gt;
&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-sh&#34; data-lang=&#34;sh&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#75715e&#34;&gt;# -fで設定ファイルのフォーマットを指定（デフォルトはtoml）&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;$ hugo new site -f yaml www.shanpu.info
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;p&gt;ついでに&lt;code&gt;git init&lt;/code&gt;で&lt;code&gt;www.shanpu.info&lt;/code&gt;ディレクトリ以下をgit管理します．&lt;/p&gt;
&lt;p&gt;この時点でビルドすればサイトは出来上がるのですが，せっかくなのでテーマを入れて見栄えをよくします．&lt;br&gt;
Hugoでは&lt;a href=&#34;https://themes.gohugo.io/&#34;&gt;ここ&lt;/a&gt;でテーマが色々と紹介されているので，ここから気に入ったものを選びます．&lt;/p&gt;
&lt;p&gt;今回はPaperModというテーマを選びました．&lt;br&gt;
先ほど作った&lt;code&gt;www.shanpu.info&lt;/code&gt;ディレクトリの下でこのコマンドを実行してテーマを適用します．&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;
&lt;table style=&#34;border-spacing:0;padding:0;margin:0;border:0;&#34;&gt;&lt;tr&gt;&lt;td style=&#34;vertical-align:top;padding:0;margin:0;border:0;&#34;&gt;
&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code&gt;&lt;span style=&#34;white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f&#34;&gt;1
&lt;/span&gt;&lt;span style=&#34;white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f&#34;&gt;2
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td style=&#34;vertical-align:top;padding:0;margin:0;border:0;;width:100%&#34;&gt;
&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-sh&#34; data-lang=&#34;sh&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod --depth&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#ae81ff&#34;&gt;1&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;git submodule update --init --recursive
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;p&gt;次にHugoのconfigファイルを編集します．&lt;br&gt;
参考として私の&lt;code&gt;config.yaml&lt;/code&gt;はこんな感じになりました．&lt;/p&gt;</description>
    </item>
  </channel>
</rss>
