DEV Community: Nicolas Maloeuvre

I built a Portfolio & Blog Website using nothing but HTML !

Nicolas Maloeuvre — Thu, 07 Jan 2021 05:07:22 +0000

What I built

A template of a static Portfolio & Blog website with Tailwind CSS.

Category Submission

Personal Site/Portfolio

App Link

Reusable template : https://tailwind-blog-portfolio-sample-jdnb6.ondigitalocean.app/

extracted from my website : https://www.nicomlv.com

Screenshots

Description

There are 4 pages :

Home with portfolio
Blog, with Rss and Atom and JSON feeds
Two blog entries, with highlight.js integrated : you can easily highlight your code in any language

It is a template, you can fork it and make your changes, live-reloading is fast and integrated (no need to refresh the browser). Tailwind CSS is a utility-first CSS library, it means you don't need to write any CSS, you use classes like "text-red-500" or "mt-10" (it means margin-top: 10px) or "animate-spin" (it spins your element) etc... It also means that it is very easy to re-use code snippets you can find on https://tailwindcss.com/ or https://www.tailwindtoolbox.com/

Link to Source Code

https://github.com/nicolasmlv/tailwind-blog-portfolio-sample

Permissive License

MIT

Background

My first resolution for 2021 was to create a website with a blog, so I created it, as a static website with Tailwind CSS. My first blog entry was about how to setup Tailwind CSS. I re-posted it on dev.to, and there I found the DigitalOcean Hackathon, and I thought it would be great to extract a template of my blog setup for the Hackathon, with a DigitalOcean Button, and host it on DigitalOcean (hint : the performance are way better than the other hosting provider I had in the first time.)

How I built it

I wanted to not use any JS Framework, only Tailwind CSS and HTML. It was harder than I thought because I am a very bad frontend programmer who did not know npm and postcss, but now it is ok : skill acquired.

Then I spent some times reading and learning about Open Graph, Twitter Card, RSS feed, Atom feed, JSON feed, meta properties, and implemented them.

When I wanted to push my code to DigitalOcean's App Platform, there was nothing to do : just link my Github, choose the repo and specify "static site" : it works. Because DigitalOcean recognize "public" as the folder to serve, and I used this one.

There is one thing that was not working, it is that DigitalOcean will not serve your html file without the .html. Example : /blog/welcome-to-my-blog will not serve your /blog/welcome-to-my-blog.html but it will serve /blog/welcome-to-my-blog/index.html. And actually it is not a bug but a feature, because it is better to create a folder for the blog entry and put the images of the blog entry in this same folder, so I have a better code organization now.

Additional Resources/Info

I added the DigitalOcean Button in the Readme, it was very easy, I just had to copy-paste from the documentation (see static sites) the .do/deploy.template.yaml

I know the title is a bit misleading 😄 I wrote one line of JS (inline-style 🙀) :

<button onclick="document.getElementById('pronunciation').play();">🔊</button>

Oh this one too :

<script src="/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

And this CSS :

@layer components {
  a {
    @apply underline focus:outline-black bg-gradient-to-r hover:text-white hover:from-pink-500 hover:to-yellow-500 py-1;
  }
}

for links on hover (I am very bad at design) :

Tutorial Simple HTML website Tailwind Setup

Nicolas Maloeuvre — Sun, 03 Jan 2021 04:02:50 +0000

I wanted to create a simple static website with Tailwind, but unfortunately I am not a frontend programmer, I could not understand the official Tailwind Documentation on how to get started, so here is the tutorial that would have helped me be operational in minutes.

mkdir my-static-website && cd my-static-website
# by default, npm think you will publish your project as a npm package and so it asks for your name, your email etc, weird, ignore this with “-y” 
npm init -y
npm install autoprefixer cssnano onchange postcss postcss-cli tailwindcss cross-env live-server
# it will install 1000 packages, the mythical frontend bloat was not a myth after all, keep them for you :
touch .gitignore && echo "node_modules/" >> .gitignore
# generate your tailwind.config.js file, (npx is a cli tool for npm packages)
npx tailwindcss init

Edit the "purge" config in tailwind.config.js:

purge: {
  mode: 'all',
  preserveHtmlElements: false,
  content: ['./public/**/*.html'],
},

On package.json, remove the test script and set this:

"scripts": {
  "buildcss:dev": "tailwindcss build ./main.css -o public/styles.css",
  "buildcss:prod": "cross-env NODE_ENV=production postcss build ./main.css -o ./public/styles.css",
  "onchange": "onchange 'tailwind.config.js' 'main.css' -- npm run buildcss:dev",
  "serve": "live-server public"
}

Create postcss.config.js:

const cssnano = require('cssnano');

module.exports = {
  plugins: [
    require('tailwindcss'),
    cssnano({
      preset: 'default',
    }),
    require('autoprefixer'),
  ],
};

Create Readme.md (and read it):

# My static website

## Run in dev mode

In dev mode you need the full heavy tailwind.css because when you add Tailwind classes in your HTML, it will works directly, in some milliseconds. Be sure to run : `npm run buildcss:dev` if you use `commit_and_push.sh` you don't need it.

When you need to edit your tailwind.config.js (like testing colors) or your custom CSS (`main.css`), you can run `npm run onchange` on one tab, to see those edits live. You don't need it if you only edit your HTML with Tailwind classes.

## Run in production

Compile and commit a light tailwind.css file with `npm run buildcss:prod`. If you use `./commit_and_push.sh "commit message"`, you don't need to run it.

Create commit_and_push.sh or run it manually when needed if you prefer:

npm run buildcss:prod
git add . -A
git commit -am $1
git push
npm run buildcss:dev

Create main.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* add your custom CSS here if you need */

Create public/index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My static page</title>
    <link rel="stylesheet" href="/styles.css">
  </head>
  <body>
    <p>Content</p>
  </body>
</html>

Now you are ready. Generate for the first time the heavy Tailwind with npm run buildcss:dev. Accordingly to your Readme, run npm run onchange and npm run serve in your terminal, add some Tailwind classes, edit your tailwind.config.js, add new HTML pages, it's working.

Ship it

You don't want to use the full tailwind css (4Mb) on production, buildcss:prod generates a light one. When you edit your HTML though, you prefer to use buildcss:dev because it is faster.

Create a Github repository
Create a render.com account (or Netlify, or similar), "New" / "Static site", and link your repository. Edit "Public directory" to : "./public".
Commit a new edit in order to trigger the build, it works.
Add your domain, add the A and CNAME entry, wait 5 minutes and it is live on your domain 👍

If you have any question or suggestion, please comment

How to reduce your APM Cost with this one-liner

Nicolas Maloeuvre — Wed, 16 Oct 2019 09:36:45 +0000

If the pricing of you APM is based on the number of transactions, it might interest you.

First, spot your most used transactions in the APM. In Scout, use "Highest throughput" (you will find the same in New Relic, Datadog, Librato, AppSignal, Skylight, etc) :

Then, register only 1/10th of them for example. If you use ScoutAPM and Ruby on Rails, add this in the controller :

  ScoutApm::Transaction.ignore! if rand(10) > 0

done!

Obviously, the drawback is that you will miss some data, but the "mean response time per request" should still give an honest idea of the reality.

It will depend on your needs, maybe do not use it in your main home webpage, but it can be useful to use it on that little api request that is done each time after this home webpage is loaded.