All Projects → true3dco → splashgen

true3dco / splashgen

Licence: MIT license
Rapidly build landing pages in <20 lines of python

Programming Languages

python
139335 projects - #7 most used programming language
Jinja
831 projects

Projects that are alternatives of or similar to splashgen

Particleground Portfolio
A minimalistic particle theme landing page template. ⚛️
Stars: ✭ 204 (-15.35%)
Mutual labels:  landing-page
tailwindcss-open-template
🛬 An implementation of the “Open” landing page template using Tailwind CSS Boilerplate.
Stars: ✭ 115 (-52.28%)
Mutual labels:  landing-page
yii2-render-many
Trait for Yii Framework 2
Stars: ✭ 14 (-94.19%)
Mutual labels:  landing-page
React Landing Page Template
A simple react one page landing page templates for startups/companies
Stars: ✭ 224 (-7.05%)
Mutual labels:  landing-page
Landing-CMS
A simple CMS for landing pages
Stars: ✭ 78 (-67.63%)
Mutual labels:  landing-page
Rainblur-Landing-Page
Tailwind CSS Starter Template - Rainblur Landing Page (dark)
Stars: ✭ 112 (-53.53%)
Mutual labels:  landing-page
React Landing Page
🛬 Everything you need for a modern landing page, built with React & Styled Components
Stars: ✭ 193 (-19.92%)
Mutual labels:  landing-page
Launch-Page
Create a viral launching soon page that integrates with MailChimp.
Stars: ✭ 21 (-91.29%)
Mutual labels:  landing-page
responsive-plants-website
Responsive Plants Website Design Using HTML CSS & JavaScript
Stars: ✭ 130 (-46.06%)
Mutual labels:  landing-page
upptime.js.org
⬆️📝 Documentation and landing page for Upptime
Stars: ✭ 42 (-82.57%)
Mutual labels:  landing-page
Tutorial View
Android Tutorial View
Stars: ✭ 236 (-2.07%)
Mutual labels:  landing-page
CoCreate-dashboard
A simple dashboard component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.
Stars: ✭ 20 (-91.7%)
Mutual labels:  low-code-framework
restaurant-website
Restaurant Landing Page
Stars: ✭ 134 (-44.4%)
Mutual labels:  landing-page
Mobile App Landingpage Template
📱 Free to use static generated website template for your mobile app
Stars: ✭ 208 (-13.69%)
Mutual labels:  landing-page
CoCreateCSS
A lightweight utility-first Atomic CSS framework promoting rapid UI development. No learning curve... Apply your native css property:value directly in class, then extract and transform it.
Stars: ✭ 13 (-94.61%)
Mutual labels:  low-code-framework
Neutralinojs.github.io
Official web site of neutralino.js
Stars: ✭ 199 (-17.43%)
Mutual labels:  landing-page
pc-Dooring
LowCode, PC Page Maker, PC Editor. Make PC as easy as building blocks. | 让网页制作像搭积木一样简单, 轻松搭建PC页面, Web网站, PC端网站. lowcode(low-code)可视化搭建平台
Stars: ✭ 407 (+68.88%)
Mutual labels:  low-code-framework
landing
Landing Page Framework
Stars: ✭ 36 (-85.06%)
Mutual labels:  landing-page
next-saas-starter
⚡️ Free Next.js responsive landing page template for SaaS products made using JAMStack architecture.
Stars: ✭ 497 (+106.22%)
Mutual labels:  landing-page
travel treasury landing
Vue.js landing page connected to firebase auth for collecting user signups
Stars: ✭ 18 (-92.53%)
Mutual labels:  landing-page

SplashGen

SplashGen lets you rapidly build simple landing pages as easily as you can build a simple command-line application.

You write this:

# website.py

from splashgen import launch
from splashgen.components import SplashSite, CTAButton

site = SplashSite(title="Splashgen - Splash Pages Built In Python",
                  theme="dark")
site.headline = "Build your splash page in python effortlessly"
site.subtext = """
In less than 20 lines of python, create clean and beautiful splash pages with
Splashgen. Don't waste time with no-code tools when you already know how to
code.
"""
site.call_to_action = CTAButton(
    "https://github.com/true3dco/splashgen", "View on GitHub")

launch(site)

Run this:

splashgen website.py
python -m http.server --directory build

And get this:

Example splash site

We built splashgen because we wanted a way to rapidly build landing pages without having to use no-code tools or copy bootstrap templates all over the place, and want to share it with you!

Installation

NOTE: You will need Python 3.7+

pip install splashgen

Usage

Developing your page

To build your splash page, you write a simple python script using the APIs that splashgen provides. Here is the simplest possible way to build a splash page:

from splashgen import SplashSite, launch

launch(SplashSite())

You use the SplashSite class in order to configure properties of your site, such as its headline, its subtext, and its call to action. You can also specify a custom logo (which will be automatically transformed into a favicon), as well as any SEO data you may want for site previews.

launch tells splashgen to build the splash site that you've specified.

The easiest way to see what splashgen can do is to look in the examples/ folder at what's there. You'll find both the splashgen site, as well as a splash page for ZenWeb, an idea that we had before we started working on splashgen 😃

NOTE: If you include URLs and emails in the subtext, splashgen will automatically linkify them for you.

Building your site

When you're ready to build, run splashgen path/to/file.py. Splashgen will output the built site within a folder called build/, which you can then serve using any http server.

If you want to make a change to the site, simply re-run splashgen paty/to/file.py. This will regenerate the site.

NOTE: Any previously built files still persist in the build directory. If you want to do a completely clean rebuild, make sure you rm -fr build/ first before re-running the command.

Adding a hero image

As seen in examples/zenweb.py, you can add a hero image to your page by assigning to the hero_image property on a SplashSite instance.

site.hero_image = "/path/to/hero-image.png"

Adding a MailChimp signup form

As seen in examples/zenweb.py, you can add a MailChimp signup form to your splash site by doing the following.

Get your signup form url for the form you want to use. Then, write the following

from splashgen.integrations import MailchimpSignup

site = SplashSite(title="...")
# configure the site

site.call_to_action = MailchimpSignup("<signup form url>", button_text="Join the waitlist")

We plan on adding more integrations soon!

Adding a custom form

You can add a custom form which will POST to an endpoint specified with the given data. We currently support a limited subset of form fields. If you need more types of inputs, or extended functionality, please file an issue and let us know!

from splashgen.components import Form, TextInput, EmailInput, SelectInput

inputs = [
    # NOTE: You can omit the label argument to just use inputs with placeholders
    TextInput(id="name", label="Name", required=True,
              placeholder="First and Last"),
    EmailInput(id="email", label="Email address", required=True),
    SelectInput(id="role", label="Role", options=[
        # You can specify a (text, value) tuple, or just provide text, and the
        # value will be a slugified version of the text.
        ("CEO/Founder", "exec"),
        "Engineer",
        "Other"])
]
site.call_to_action = Form(endpoint="http://postman-echo.com/post",
                           inputs=inputs,
                           submit_text="Get Started")

For a full-fledged example, see examples/form_cta.py

Deploying to GitHub pages

You can easily deploy splashgen sites to github pages, as long as you don't mind checking in your build/ folder with your repo.

  1. Create a repository which will host your site script.
  2. Write your site script, e.g. website.py, at the root of your repo
  3. Run an initial build, e.g. splashgen build site.py
  4. git push to your repo (NOTE: make sure you do not put build/ as part of your gitignore)
  5. On your repo's settings tab, navigate to Pages on the sidebar, then under Source, choose the folder /build
  6. Click "Save"

Now when you go to <username>.github.io/<repo>, you should see your built site.

More info: https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#choosing-a-publishing-source

Also, check out https://github.com/Dohva/RakdamSplash for an example of how to use GitHub's workflows to build a splashgen site without having to check in the build/ directory (code).

Deploying to Netlify

You can deploy splashgen sites to Netlify without checking in your build/ folder, and have Netlify build and deploy the site for you.

  1. Create a repository which will host your site script.
  2. Write your site script, e.g. website.py, at the root of your repo
  3. From your repo root, run echo splashgen > requirements.txt
  4. From your repo root, run echo 3.7 > runtime.txt
  5. git push to your repo
  6. In the Netlify console, create a new site from git
  7. Add the repo that you just created
  8. Put splashgen website.py as the build command
  9. Put build as the publish directory
  10. Click the create button, and your site should now be ready to deploy on Netlify

NOTE: Because splashgen is still in early development, you may want to pin the version of splashgen you used to build the site. In that case, change splashgen in requirements.txt to splashgen==0.0.23, or whatever the current version you have installed is.

You can see an example of a site deployed to Netlify on splashgen's splash pages's repo

Opting out of analytics

By default, splashgen sites contain a simple analytics snippet that helps us determine usage. We explicitly opt-out of tracking any personally identifiable information, and only track the site's host name. As a free and open-source product, it's important that we're able to measure usage of splashgen in order to continue to invest in its development.

That said, you can easily opt-out of analytics tracking by adding the following code-snippet:

site.enable_splashgen_analytics = False

Help us out! 🙏

Splashgen is currently in an early alpha. If there are any missing features that you would like added please open an issue and we will add it in! This API is in flux and will receive significant improvements and changes over the next few weeks.

FAQ

I'm seeing an error that says launch() was never called

This is most likely because you've named your Python file something that conflicts with an existing package. E.g. if you name your file site.py, that conflicts with python's site module. We're currently working on a way around this, but for now the easiest thing to do would be to change your file name.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].