Next.jsで自作ブログを作る②
こちらの続きです。
実際に作成してデプロイしたブログがこちらです
README.mdをみて編集をする
作成したプロジェクトの直下にREADME.mdというファイルがあると思います。そこに最初に何を設定すべきかが書いてあるのでまずはその通りに編集をします。
theme.config.jsの編集
Your Name.のところを自分の名前に変更します
また、このファイルを編集することでフッターを変更することもできます。
footer: (
<footer>
<small>
- <time>{YEAR}</time> © Your Name.
+ <time>{YEAR}</time> © kuwaharu.
<a href="/feed.xml">RSS</a>
</small>
<style jsx>{`scripts/gen-rss.jsでRSSフィード用の名前とサイトURLを更新
私の場合、自分のドメインを設定したのでこのようになっていますが、設定していない場合は、vercelデプロイ時のURLで更新します。
async function generate() {
const feed = new RSS({
- title: "Your Name",
- site_url: "https://yoursite.com",
- feed_url: "https://yoursite.com/feed.xml",
+ title: "kuwaharu my-blog",
+ site_url: "https://tech.kuwaharugo.com",
+ feed_url: "https://tech.kuwaharugo.com/feed.xml",
});pages/_document.tsxでメタタグを更新
_document.jsはNext.js プロジェクトにおけるカスタムドキュメントを定義したもので、HTMLの構造全体をカスタマイズすることができます。
今回はbodyには触れず、Headを編集していきます。
SEOやSNSシェアに必要な情報を設定しています。今回はまだ画像を用意していないのでmeta.imageのURLは編集していませんが、ここを編集することでページがシェアされた時のサムネイル画像を変えることができます。
export default function Document() {
const meta = {
- title: "Next.js Blog Starter Kit",
- description: "Clone and deploy your own Next.js portfolio in minutes.",
+ title: "kuwaharu's Tech Blog",
+ description: "Sharing knowledge and insights on web development, programming, and technology.",
image: "https://assets.vercel.com/image/upload/q_auto/front/vercel/dps.png",
};
return (
- <Html lang="en">
+ <Html lang="ja">
<Head>
<meta name="robots" content="follow, index" />
<meta name="description" content={meta.description} />
@@ -17,7 +17,7 @@ export default function Document() {
<meta property="og:title" content={meta.title} />
<meta property="og:image" content={meta.image} />
<meta name="twitter:card" content="summary_large_image" />
- <meta name="twitter:site" content="@yourname" />
+ <meta name="twitter:site" content="@kuwaharu_it" />
<meta name="twitter:title" content={meta.title} />
<meta name="twitter:description" content={meta.description} />
<meta name="twitter:image" content={meta.image} />pages/posts/ に新しい.mdファイルを追加して最初の記事を執筆
pages/posts/にfirst-blog.mdを新規作成して最初の記事を書きます。
完成したらリモートレポジトリにプッシュすると自動的にビルドされるので少し待つと新しい記事が反映されます。
---
title: 初めての自作ブログ
date: 2024/11/7
description: 初めて自作ブログを作ってみた。
tag: web development
author: kuwaharu
---
## 初めての投稿
今まで[note](https://note.com/kuwaharu/)の方で記事を執筆していましたが自作でブログを作ってみたくなったのでNext.jsを使用して作ってみました。今後はとりあえずこのサイトをどうやって作ったかなどを記事にしていこうと思います。初めて投稿した記事を確認すると、最後の「ます」がなぜか「〼」になってしまいます。原因はcssにあるので無効化します。
styles/main.cssを修正
dlig~cv04をコメントアウトしてcpspの末尾を,から;に変更します。
body {
-webkit-font-smoothing: subpixel-antialiased;
font-feature-settings:
"case" 1,
- "cpsp" 1,
- "dlig" 1,
+ "cpsp" 1;
+ /* "dlig" 1,
"cv01" 1,
"cv02",
"cv03" 1,
- "cv04" 1;
+ "cv04" 1; */
font-variation-settings: "wght" 450;
font-variant: common-ligatures contextual;
letter-spacing: -0.02em;これでREADME.mdに書かれていた設定は終了です。新しい記事を書く際は最初の記事を書いた時のように新しいファイルをpages/posts/に追加していきます。
今回はここまでで。最初のaboutページも編集したのですが、ここは人によって内容が異なると思うのでいらないかなと。
しばらくは自作ブログとnote両方とも記事を上げようと思います。自作ブログの方はマークダウンなのでそのままペーストすればいいだけなので楽ですし。
現状テンプレートを説明書通りに変更しただけなのでNext.jsなどもっと勉強して独自機能を作れたらまた記事にしようと思います。