This repo has been archived at 2023年05月04日.
And site oriverk.dev is built with oriverk/astro-site: astro-svelte site on Cloudflare Pages with continuous deploy by GitHub Actions
- Vite
- Next Generation Frontend Tooling
(削除) Preact (削除ここまで)(削除) Fast 3kB alternative to React with the same modern API (削除ここまで)
- React
- A JavaScript library for building user interfaces
- TypeScript
- TypeScript is JavaScript with syntax for types.
- goober
- A less than 1KB css-in-js solution
- Cloudflare Pages
- Cloudflare Pages is a JAMstack platform for frontend developers to collaborate and deploy websites.
※(注記)基本的には先述の公式サイトを見て理解、サイトを作成した。下記は作成後に見つけたページ等をメモ代わりに記載。
- Zenn - Next.jsを使う必要がない小規模なSPAの最小構成を考えてみた
- React + Viteで新規プロダクトを開発している話
- Zenn - Vite で最速 React & TypeScript
- blog.ojisan.io - Preactの環境構築 of 2020
- mizchi.dev - 省ビルドサイズ要求環境でモダンフロントエンドをやる (主に preact の話)
reference: vitejs: Env Variables and Modes
| Name | Description | Reference |
|---|---|---|
| VITE_SITE_PATH | for portfolio site | GitHub: oriverk/oriverk.dev |
| VITE_BLOG_PATH | for portfolio blog | GitHub: oriverk/blog.oriverk.dev |
| VITE_GITHUB_USER_ID | GitHub Account | GitHub: oriverk |
| VITE_TWITTER_USER_ID | Twitter Account | Twitter: not_you_die |
| VITE_GITHUB_PERSONAL_ACCESS_TOKEN | /ghp_\w+/ | GitHub: 個人アクセストークンを使用する |
node_modules/goober/global/global.d.ts(1,45): error TS2307: Cannot find module 'csstype' or its corresponding type declarations. node_modules/goober/goober.d.ts(1,45): error TS2307: Cannot find module 'csstype' or its corresponding type declarations.
devDependency に csstype を追加して回避した。あとで詳しく調べる。
about ページ用に内部で保持、処理していた markdown parser が要らなくなったので下を削除した。後で micromark を使う時用にメモ書き
import { micromark } from "micromark"; import { frontmatter } from "micromark-extension-frontmatter"; import { gfm, gfmHtml } from "micromark-extension-gfm"; export function parseMarkdwon(markdown: string) { const html = micromark(markdown, { allowDangerousHtml: true, extensions: [frontmatter(), gfm()], htmlExtensions: [gfmHtml()], }); return { html }; }
import { defineConfig } from 'vite' export default defineConfig({ assetsInclude: [/\.mdx?$/] })
静的ファイルをコピーするプラグイン。不必要になったので削除
import { defineConfig } from 'vite' import { viteStaticCopy } from 'vite-plugin-static-copy' export default defineConfig({ plugins: [ viteStaticCopy({ targets: [ { src: 'README.md', dest: "." }, { src: 'Resume.md', dest: "." } ] }) ] })