An open source personal website / portfolio generator
Explore the docs »

View Demo · Report Bug · Request Feature

WebGen is an open source personal website / portfolio generator developed with ❤️. Portfolios or personal websites are a great way to demonstrate the competencies you would list on a resume or talk about in an interview — they allow you to show and not just tell. It is a multi-faceted way to organize your accomplishments, goals, aspirations, and personal thought. It showcases your personality to potential employers and organizations. It provides tangible proof of your skills and abilities and demonstrates to the employer that you are qualified for that specific job.

This summer I finally decided to update my website that I developed 2 years ago. However 2 years ago, I was just starting to learn about web development and hence hardcoded everything on my website to the point where it wasn't possible for me to update it this summer. Hence I tried to find some online website generators or tools to use. Much to my surprise, the only tool I found was this. This would have sufficed until it struck me that the usage of this tool would require git, Ruby and basic knowledge of web dev and it is pretty much only for CS students or professionals. Thus I developed WebGen, which allows users of any domain to develop their personal websites without requiring the knowledge of programming languages, tools or technologies. You can develop your website from scratch or select some pre-made themes and receive the html,css and js file in your email. We provide you with the source code of the website you developed so that you're at liberty to decide what you want to do with it. Mostly you would want to host your website somewhere GitHub, Netlify, Render, Vercel etc. ( Video guides are present to help you host your website ).

WebGen is built using the PERN ( PostgreSQL, Express, React and NodeJS ) stack.

• React
• NodeJS
• AWS
• PostgreSQL

To get a local copy up and running follow these simple steps.

This is the list of softwares required to run WebGen and how to install them.

• docker ( Optional )

  • How to Install Docker

• npm

  npm install npm@latest -g

• redis

  • Linux

  sudo apt update
  sudo apt install redis-server
  sudo systemctl start redis-server

  • MacOS

  brew update
  brew install redis
  redis-server /usr/local/etc/redis.conf

  • Windows : How to Install and Run Redis

• postgres

  • Linux

  sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list'
  wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -
  sudo apt-get update
  sudo apt-get -y install postgresql
  sudo systemctl start postgresql

  • MacOS

  brew update
  brew install postgresql
  initdb /usr/local/var/postgres
  pg_ctl -D /usr/local/var/postgres start

  • Windows : How to Install and Run PostgreSQL

1. Clone the repo

   git clone https://github.com/Sid200026/WebGen.git

2. Change directory

   cd WebGen

3. Create a .env and .env.production file with the same content

   PORT=<Port on which to run the application>
   SECRET_KEY=<Secret key used to encrypt strings>
   EMAIL_USER=<Gmail ID from which to send emails to>
   EMAIL_PASSWORD=<Password from which to send emails to>
   DATABASE_USER=<User of the database>
   DATABASE_PASSWORD=<Password of the database>
   DATABASE_NAME=<Name of database to be used>
   DATABSE_HOST=<URL on which PostgreSQL server is running Eg: 127.0.01, database ( if using docker )>
   DATABASE_PORT=<Port on which database is running Eg. 5432>
   REDIS_HOST=<URL on which Redis server is running Eg: 127.0.01, redis ( if using docker )>
   REDIS_PORT=<Port on which Redis server is running Eg: 6379>

   For example, if installing the application via npm, following is a valid env file

   PORT=8000
   SECRET_KEY=webgen
   EMAIL_USER=************gmail.com
   EMAIL_PASSWORD=************
   DATABASE_USER=postgres
   DATABASE_PASSWORD=********
   DATABASE_NAME=postgres
   DATABSE_HOST=localhost
   DATABASE_PORT=5432
   REDIS_HOST=127.0.0.1
   REDIS_PORT=6379

   For example, if installing the application via docker, following is a valid env file

   PORT=8000
   SECRET_KEY=webgen
   EMAIL_USER=************gmail.com
   EMAIL_PASSWORD=************
   DATABASE_USER=postgres
   DATABASE_PASSWORD=********
   DATABASE_NAME=postgres
   DATABSE_HOST=database
   DATABASE_PORT=5432
   REDIS_HOST=redis
   REDIS_PORT=6379

4. Create the user files

   bash scripts/user_files.sh

1. Install the dependencies

   npm install

2. Copy assets folder

   bash scripts/asset_copy.sh

3. Run the backend server

   npm run dev

4. Open another terminal and run the frontend server

   npm run bundle

5. If you want to run both of them in the same terminal, run

   npm run conc

1. Built the docker service

   docker-compose build

2. Attach container to each of the services

   docker-compose up -d

For FAQs, examples, guidelines please refer to the Documentation

See the open issues and roadmap for a list of proposed features (and known issues).

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b AmazingFeature)
3. Commit your Changes (git commit -m 'feat(): Add some AmazingFeature')
4. Push to the Branch (git push -u origin AmazingFeature)
5. Open a Pull Request

For a more detailed walkthrough, see CONTRIBUTING for more information.

Distributed under the MIT License. See LICENSE for more information.

Siddharth Singha Roy - @Sid200026 - siddharthsingharoy@gmail.com

Project Link: https://github.com/Sid200026/WebGen

• Prettier
• ESLint
• Travis CI
• Bull
• Img Shields
• AWS RDS
• AWS EC2
• AWS CodeDeploy
• AWS S3
• Hatchful
• README Template