ブログを始める人に読んで欲しいブログ作成方法zukucode主にWEB関連の情報を技術メモとして発信しています。other初めてブログを始める人に読んで欲しいブログ作成方法ブログの作成方法を調べると真っ先に候補に上がるのがワードプレスですが、私がおすすめするブログの作成方法は静的サイトジェネレーターです。静的サイトジェネレーターとは?ブログの作成方法を調べても外部の無料ブログサービスやワードプレスの情報がほとんどなので、プログラミングの知識が全く無い人にとっては存在すら知られていないかもしれません。静的サイトジェネレーターの特徴を説明するにはまずは前提知識としてホームページやブログを公開する仕組みを少し説明する必要があります。ブログを公開する仕組み自分のパソコンにhtmlファイルを作成し、記事を書きます。chromeなどのブラウザで開くとhtmlファイルに記載された内容に従って情報が表示されます。このhtmlファイルを全世界に向けて公開したい場合は、24時間稼働していて誰からでもアクセスができるパソコン(サーバー)にそのhtmlファイルを置く必要があります。サーバーを自分で用意するのは難しいのでレンタルサーバーを利用するのが一般的です。噛み砕いて説明しましたが、以上の知識を踏まえて静的サイトジェネレーターの特徴をワードプレスと比較しながら説明していきます。最初にワードプレスの特徴を簡単に説明します。htmlを何ページも作成していくと、ヘッダ部分やサイドバーの部分など、ブログ記事以外の部分は各ページでほぼ同じになっていることに気づくと思います。サーバー(レンタルサーバー)でphpというプログラミング言語を使うことにより、ヘッダ部分などを共通化したり、関連記事を表示したり便利な機能を使うことができるようになります。phpはプログラミング言語ですが、プログラミングの経験がない人でも簡単に使えるようにしたのがワードプレスです。サーバー(レンタルサーバー)でhtmlを作成するイメージです。静的サイトジェネレーターの特徴ワードプレスがサーバー(レンタルサーバー)でhtmlを作成するのに対して、静的サイトジェネレーターは自身のパソコンでhtmlを作成します。ワードプレスと同じようにヘッダやサイドバーなどの共通部分は共通化できますし、いろいろなデザインのテンプレートが用意されているので、環境構築さえできればすぐにブログを書き始めることができます。記事の部分だけ自分で書いて、それ以外の部分は全てプログラムの内部で自動でやってくれるので、記事の執筆だけに集中できます。自身のパソコンで記事を書く→プログラムを実行して記事を元にhtmlファイルを作成→そのファイルをサーバーに置く、という流れになります。phpやデータベースなどの機能が使えるレンタルサーバーはレンタル料が高くなってしまいますが、htmlファイルを置くだけなら格安のレンタルサーバーでも十分なのでレンタル料も抑えることができます。レンタルサーバーでphpなどのプログラムを実行しないので、セキュリティの心配もなくなります。generator)は以下があります。JekyllHugoHexo情報量はワードプレスと比べれば少ないかもしれませんが、上記3つなら調べれば使い方を紹介したページがでてきます。使い方を覚えるのは大変かもしれませんが、ワードプレスの使い方を覚えるのを考えれば手間は同じだと思います。静的サイトジェネレーターも選択肢の1つとして検討してはいかがでしょうか。10で範囲を指定して画面のスクリーンショットを撮る方法を紹介します。画面全体の指定した部分のみを切り取ってクリップボードに保存します。10でクリップボードの履歴を複数管理して貼り付ける方法を紹介します。通常コピーした文字列は、別の値をコピーすると、最初にコピーした文字列は消えてしまいます。postcssを導入するwebpackでpostcssを導入してautoprefixerなどを行います。postcss-loaderはwebpackでpostcssを行うために必要です。lessをImportしてビルドするhtmlやbodyなどに適用するベースのクラスを外部のlessファイルに実装して、スタイルをサイト全体に適用したい場合があります。外部のlessファイルをモジュールとしてImportしてwebpack...webpack-dev-serverでhttpsでのアクセスを可能にする方法webpack-dev-serverでhttpsでのアクセスを可能にする方法を紹介します。外部APIのテストや、メディアデバイスのテストなどで、開発中のlocalhostをhttpsにする必要があると...ExtractTextPluginでcssファイルを出力するwebpackのプラグインExtractTextPluginを使って、ビルドされたjsファイルからstyleの部分を抽出してcssファイルで出力します。extract-text-webpack-plu...webpackの設定を開発環境と本番環境で変更するwebpack.config.jsで本番環境でのビルドのみコードを圧縮するなどの処理を設定したい場合があります。webpackの設定を開発環境と本番環境で変更する方法を紹介します。cross-envと...webpack-dev-serverで開発サーバーを起動するwebpack-dev-serverで開発サーバーを起動します。自分で作成したモジュールをインポートするときはインポートするファイルを基準に相対パスで指定する必要があります。フォルダ構成によっては深く階層を辿らないといけないので、フォルダ構成が変わってしまうと大変...webフォントがIE11で表示されない場合の対処法FontAwesomeなどのwebフォントがなぜかIE11のみ表示されないことがありました。システム日付をYYYYMMDD形式などの文字列型に変換する当ホームページに記載されている会社名・製品名・システム名などは、各社の登録商標、もしくは商標です。