静的サイトジェネレータ

こんにちは。今回は静的サイトの作り方について書いてみます。 フリー張り紙素材 はりがみやも静的サイトで、基本的にはこの記事と同じようなやり方で作られています。 【注意】 これを書いている人は趣味レベルな上、「なんだかわからんが動いたからヨシ！」という人間です。ベストプラクティスとは程遠い内容かもしれません。 とはいえ「ちゃんとやる」「完璧にやる」といろいろとハードルが高いですし。 とりあえず動かしてみたい、作ってみたいという方に読んでいただければ。 想定している読者 前書き 静的サイトとは？ 動的サイトとは？ 静的サイト作成の流れ 静的サイトジェネレーター 本記事のゴール 完成イメージ 環境の…

静的サイトジェネレータPelicanでAsciiDocを使いたかったが…。

静的サイトジェネレータPelicanでAsciiDocを使いたい。

静的サイトジェネレータPelicanを使ってみる。

どうも、まさとらん（@0310lan）です！今回は、超ミニマムなシンプルさがウリのブログ構築ツールをご紹介します！面倒な依存関係は一切なく、自動生成されるファイルは編集しやすい単純なHTMLというのが大きな特徴です。静的サイトジェネレータのように機能しますが、プログラミングは不要でHTML&CSSの知識があれば誰でも使いこなすことができます。ブログやWebサイトの構築に興味がある方は、ぜひ参考にしてください！ 【 1POST 】 ■「1POST」の使い方 それでは、「1POST」をどのように使えばいいのか詳しく見ていきましょう！Node.jsの開発環境をお持ちであれば、以下のコマンドから「1P…

先日作った「ちくわのノート」を紹介します。 ちくわのノート ちくわのノートは、個人メモの中で公開できるものを公開する場です。 あくまで公開可能なメモという位置づけであり、積極的に読んでもらうことを意図しているわけではありません。そのため、本ブログとは目的が異なります。 なぜメモを公開するのか 積極的に読んでもらうことを意図していないことから分かるように、ちくわのノートは基本的に私にメリットがあると感じて作りました。以下列挙します。 ページをつくる動機になる 動機がないとデイリーページだけ作りがち 情報が整理されたページをつくる動機になる せっかく公開するならちゃんとするか、という気持ちになる …

できるだけ毎日更新を考えていたんですが、今日本ブログを開くと、「あ、もう3日も書いてないんだ・・・」と思ってしまった。 ちなみに「です・ます調」で書くのは疲れてきたので、普通に書くことにする。 今日まであったことをふりかえってみる。 出社2日目 金曜日は出社2日目でした。1日目とそんなに変わらなかったかな。 2日目にして、なんかもう慣れてしまった。 まだ研修なので、忙しい感じではない。しかし、プレゼン資料を作るので、資料のクオリティとプレゼン能力伸ばすことを今後意識していきたいかな。 土曜日はReactの勉強 静的サイトジェネレータでブログを作成中。 ずっと家にいて、ブログ作りに全振りしてた。…

内容 ポートフォリオサイトを作成しました 工数見積もりに Instagantt を使い始めました Slack で Todo 管理を始めました 業務 API設計、DB設計を行いました インシデントに3回出動しました AppsFlyerのBQ連携を作成しました ポートフォリオサイトの開設 モチベーション 情報が乱立していたので情報を一元化したかった（Wantedly, Lapras, Findy etc...） 自分の好きなUIで経歴を作成したかった Nuxt.jsの静的サイトジェネレータを利用したかった 作成した感想として「スモールスタートが死ぬほど大事」ということでした。これまで個人開発をする…

最後のブログを立ち上げる。 これまでとこれから。 CGM：Consumer Generated Media これまでのブログ n個目のブログを立ち上げた。 これまでたくさんのブログを立ち上げてきた。そして人知れず消えていった。今回は最後のブログになるだろう。 いや、最後のブログにしたい。 初めてのブログは小学生の時に簡単なHTMLを書いたこと。 高校生になって今となってはよくわからないなのを書いた。 この最初期のブログの記憶は全くない。書いた記憶はあるが、中身は覚えていない。 社会人になってWEB制作の仕事に就き、WordPressやサーバーの仕組みを学ぶためにレンタルサーバーを借りた。その時…

はじめに 前回に引き続き、開発環境にマークダウン形式の記事を保存し、Gatsbyで取得する方法を確認する。 今回は取得したファイルの中身（マークダウン形式）を取得して、解析して最終的にHTMLに変換して表示する方法を確認する。 ここまで参考にしてきたGatsby公式チュートリアルと、gatsby-starter-blogスターターキットとでは、利用するマークダウンの変換方法が異なる。 参考にした方法 ファイル形式 変換プラグイン 公式チュートリアル .mdx gatsby-plugin-mdx gatsby-starter-blogスターター .md gatsby-transformer-re…

自分用の web ノートができました。 gitlab pages というサービスを利用して、web ページとして参照できます。 ファイルを編集したい場合はクローンしているリポジトリか、または web から直接更新が可能です。 これで、会社の規定に逆らわずにネット環境さえあればいつでも参照できる自分用ノートが用意できました。 構成 更新方法 まとめ 構成 全体の構成は gitlab pages + hugo という静的サイトジェネレータを使い、ページを構築しています。 構築と言っても難しいものではなく、公式のドキュメントとテンプレートに沿って作業を進めただけです。 始めはページが上手く表示されま…

2008 年からさくらインターネットでスペースを借りて、自分のウェブサイトを作成してきました。 ホームページ部分: modx で作成 → 武田史郎のウェブサイト ブログ部分: WordPress で作成 → 武田史郎のウェブログ という構成で作成していました。さくらの前は ホームページ部分: レンタルスペースに手書きの HTML ファイルで作成 ブログ部分: はてなダイアリー にしていました。さくらに変更したのは ホームページなどいろいろ自動化したい部分があった 自由度が高い環境にしたかった CMS をいじってみたかった という理由です。さくらを借りて modx + WordPress を10…

空廻《そらね》ロジカです。昨年2021年7月に漫画家デビューしました。 それまではイラストレーターのような作家のような……お仕事を細々としていました。 今回、私のWEBサイトをリニューアルしたので、何をしたかをメモしておきます。 新サイトデザイン（PC） https://logica.work/ はじめに 私は「絶対に独自ドメインのサイトを持っておくべき」派なのですが、以前から保守管理が厳しくなってきていました。 主に、最新のWEB制作のお勉強が、ですけど……（Vue.jsの本とか買ったけど何もわからない！）。 ずっと前はWordPressを使っていて、その後は大して情報もないしブログも書かな…

静的サイトジェネレータが話題だったので、去年からGatsby.jsを学んでたのですが、 ただ単にチュートリアルやるだけではつまらないので、プロジェクト型学習でやってみることにしました。 前々から私は、プログラミングはテスト勉強的なやり方では身につかないと思っていて、 いきなりプロトタイププロジェクトで作りながら学ぶのが一番だと思ってましたが、 今回やってみて問題点も色々わかりました。 プロジェクト型学習とは プロジェクト型学習とは、教科書を読んで練習問題を解く学校型の学習ではなく、 実際にソフトウェアを開発しながら学習していく実践型の学習方法です。 今回は、まずJavascriptの知識をアッ…

連続のブログ投稿になりますが、下書きに眠ってた記事がありました。 供養の意味も込めて、公開しておきたいと思います。 去年の10月から12月の辺りで、気が向いたときに調べてまとめてた情報だった気がします。 記事の目的 React（Create React App=CRA）とNext.jsは何が違うのかを調べて整理する。 背景 CRAで作ったReactアプリは何となく雰囲気で動かせるようになってきた人が、Next.jsに関わるケースがあると思います。 そしてその際、CRAで作ったReactアプリの知識のうち、何を流用できる/できない、また注意点は何かを素早く知りたい状況になると思います。 ここでは…

はじめに はじめまして。株式会社アドグローブ、プロダクトデザイン部フロントエンドチームです。 プロダクトデザイン部はアドグローブからプロダクトを創出することを目的の一つとして2020年度に新設された部となり、そのフロントエンドチームの取り組みの一環としてスタイルガイドの作成を行うことになりました。 今回の記事ではスタイルガイドの構成をどのように決定したのか、という内容を書いています。 スタイルガイドをつくることにした背景 フロントエンドエンジニアとして、HTML、CSS、JavaScriptのコーディングやReact、Vue.jsのようなフレームワークによる開発などの基本的なスキルを伸ばしてい…