Skip to content

refactor: migrate to 11ty for blog platform #1201

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 7, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 65 additions & 0 deletions .eleventy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import pluginWebc from "@11ty/eleventy-plugin-webc";
import { EleventyRenderPlugin, InputPathToUrlTransformPlugin } from "@11ty/eleventy";
import { VentoPlugin } from 'eleventy-plugin-vento';
import eleventyNavigationPlugin from "@11ty/eleventy-navigation";
import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
import { feedPlugin } from "@11ty/eleventy-plugin-rss";

export default function (eleventyConfig) {
eleventyConfig.addPlugin(EleventyRenderPlugin);
eleventyConfig.addPlugin(pluginWebc, {
// Glob to find no-import global components
// This path is relative to the project-root!
components: "src/_components/**/*.webc",
});
eleventyConfig.addPlugin(VentoPlugin);
eleventyConfig.addPlugin(InputPathToUrlTransformPlugin);
eleventyConfig.addPlugin(eleventyNavigationPlugin);
eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
// which file extensions to process
extensions: "html",

// Add any other Image utility options here:

// optional, output image formats
formats: ["webp", "jpeg"],
// formats: ["auto"],

// optional, output image widths
// widths: ["auto"],

// optional, attributes assigned on <img> override these values.
defaultAttributes: {
loading: "lazy",
decoding: "async",
},
});
eleventyConfig.addPlugin(syntaxHighlight);
eleventyConfig.addPlugin(feedPlugin, {
type: "atom", // or "rss", "json"
outputPath: "/feed.xml",
collection: {
name: "posts", // iterate over `collections.posts`
limit: 10, // 0 means no limit
},
metadata: {
language: "en",
title: "Alex Dobin's Blog",
subtitle: "A blog about technology and homelabbing",
base: "https://alexdobin.com/",
author: {
name: "Alex Dobin",
email: "[email protected]", // Optional
}
}
});

eleventyConfig.addPassthroughCopy({ static: "/" });
}

export const config = {
dir: {
input: "src"
},
};
39 changes: 0 additions & 39 deletions .eslintrc.cjs

This file was deleted.

10 changes: 5 additions & 5 deletions .github/workflows/build_deploy_gh_pages.yml
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ name: Build and deploy GitHub pages
on:
# Triggers the workflow on push or pull request events but only for the "source" branch
push:
branches: ['source']
branches: ["source"]
pull_request:
branches: ['source']
branches: ["source"]

# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
Expand All @@ -22,7 +22,7 @@ permissions:
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
group: 'pages'
group: "pages"
cancel-in-progress: false

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
Expand All @@ -42,7 +42,7 @@ jobs:
- name: Setup Node.js environment
uses: actions/setup-node@v4
with:
node-version: '20.11.x'
node-version: "20.11.x"

- name: Install and Build 🔧
run: |
Expand All @@ -56,7 +56,7 @@ jobs:
# Artifact name
# name: # optional, default is github-pages
# Path of the directory containing the static assets.
path: build/
path: _site/
# Duration after which artifact will expire in days.
# retention-days: # optional, default is 1

Expand Down
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@ node_modules
/build
/.svelte-kit
/package
/_site
2 changes: 1 addition & 1 deletion .node-version
Original file line number Diff line number Diff line change
@@ -1 +1 @@
v20.11.1
v20.13.1
18 changes: 0 additions & 18 deletions .prettierrc

This file was deleted.

2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
The MIT License (MIT)

Copyright (c) 2015 Gatsbyjs
Copyright (c) 2024 Alex Dobin

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
41 changes: 9 additions & 32 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,38 +1,15 @@
# create-svelte
# alexdobin.com - personal blog

Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
Welcome to my personal blog! I'm Alex Dobin, a software engineer and homelab enthusiast. I write about my experiences with technology, homelabbing, and other things that interest me. I hope you find something useful here!

## Creating a project
## Tech stack
- [Eleventy](https://www.11ty.dev/)
- [GitHub pages]](https://pages.github.com/)
- [GitHub Actions](https://docs.github.com/actions)

If you're seeing this, you've probably already done this step. Congrats!
## Development
To run the site locally, you will need to have Node.js installed. You can then run the following commands to get started:

```bash
# create a new project in the current directory
npm init svelte@next

# create a new project in my-app
npm init svelte@next my-app
```

> Note: the `@next` is temporary

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
npm run serve
```

## Building

Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:

```bash
npm run build
```

> You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.
Loading