https://github.com/dmccrthy/dan.sbs
Personal Website w/@tailwindcss & @webpack
https://github.com/dmccrthy/dan.sbs
js nodejs personal-website portfolio tailwindcss webpack
Last synced: about 1 year ago
JSON representation
Personal Website w/@tailwindcss & @webpack
- Host: GitHub
- URL: https://github.com/dmccrthy/dan.sbs
- Owner: dmccrthy
- License: agpl-3.0
- Created: 2023-07-03T20:06:13.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-02-18T04:29:57.000Z (over 1 year ago)
- Last Synced: 2025-04-09T19:12:09.896Z (about 1 year ago)
- Topics: js, nodejs, personal-website, portfolio, tailwindcss, webpack
- Language: HTML
- Homepage: https://dan.sbs/
- Size: 13.5 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
dan.sbs
## ⚙️ About
This is the source code for my website [dan.sbs](https://dan.sbs). Alongside the typical HTML, I've implemented a component system, and a way to statically generate pages from markdown. The components are organized using [webpack-custom-elements](https://www.npmjs.com/package/webpack-custom-elements) which is a webpack loader I developed for this exact purpose. Markdown to HTML is handled by *./utils/markdownBuilder.js*, and templates are sourced from template.html. NOTE: template.html uses a number of tags like {title} which ard direct references to metadata at the top of the markdown.
## 🏁 Getting Started
1. **Clone the Repo**
Start by cloning the repository to your device
```shell
git clone https://github.com/dmccrthy/dan.sbs
```
2. **Install Dependencies**
From here you should navigate to the site folder and install the dependencies
```shell
cd dan.sbs
npm install
```
3. **Run the Website**
```shell
npm run develop
```
From here the site should be running at http://localhost:8000
4. **Build for Production**
Although we're using webpack, I've written a custom script to handle building all parts of the website
```shell
./build.sh
```
This should create a ./dist folder with the complete static site. Unlike webpack, this will include the html for all pages (*including ones generated from markdown*), the compiled tailwind css, and images. **This also maintains the relative path structure used in the HTML :)**
## 🧰 Tools Used
- [Webpack](https://webpack.js.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Markdown-it](https://github.com/markdown-it/markdown-it)
- [Sitemap (NPM)](https://www.npmjs.com/package/sitemap)
#### Credit to Twemoji for the favicon lol.
## 🗒️ License
This Website is provided under the AGPL-3.0 license. Feel free to use it as inspiration for your own website.
##
Thanks for Reading
-Dan