DEV Community

Play Button Pause Button
Ahmad Awais ⚡️
Ahmad Awais ⚡️

Posted on

pudl — JavaScript Static Site Generator for Quick Prototyping #OneDevMinute

pudl is a shiny new JavaScript-based Static Site Generator that I recommend you to use for quick Prototyping of static sites. It's for now just meant for HTML and CSS both of which are generated via gulp workflow that compiles pug and sass for you.

🌟 Make sure you star the pudl repo on GitHub.
[SPOILER ALERT] — webpack + JS setup coming in v2.

🐶 What Can pudl Do?

  1. Live reloads browser with BrowserSync.
  2. CSS: Sass to CSS conversion, error catching, Autoprefixing and CSS minification.
  3. Watches files for changes in CSS.
  4. Corrects the line endings.
  5. InjectCSS instead of browser page reload
  6. Sends message notification to you.
  7. Prevents pipe breaking caused by errors.
# PREREQUISITE: Before getting started read all in this repo
# http://github.com/maedahbatool/pudl
# STEP #0: Download + Install → Node.js and npm https://nodejs.org/en/download/

# GETTING STARTED:
# Step #1: Download the Required Files by running the following command

curl -L https://git.io/pudlgfl -o "gulpfile.js" && curl -L https://git.io/pudlpkjs -o "package.json" && curl -L https://git.io/pudlgig -o ".gitignore" && curl -L https://git.io/pudlcg -o "config.js"

# Step #2: Editing the Project Variables config.js file according to your folder structure (Make sure to create style.scss and index.pug files)
# Step #3: Installing Node Dependencies by running
npm install

# Step #4: Finally run
npm start

# Step #5: Your site should be up on http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

📺 Watch a more detailed version on YouTube →

I hang out on Twitter all the time, let's be friends there →

P.S. If you like my work, feel free to share it, like it. I am quite active on twitter you can find me cracking silly jokes there, maybe follow me on Twitter to connect and subscribe to my YouTube channel →

Peace! ✌️

🗣️ Comment below if you didn't get something.

Top comments (0)