This is kickoff project archetype for website creation. It is based on the Freelancer full website Bootstrap theme.
This is an example that is originally created from this archetype.
You must have Node.js and the kickoff utility installed.
You can create a new project with the following command:
kickoff -s tombenke/website_freelancer_archetype -d new_project_name
The utility will download the project template from GitHub, then asks some qouestions,
that you may give, or simple press Enter in case you are satisfied with the default answers.
? The name of the project: mysite
? The short description of the project: This is my single page website.
? The contact email address: [email protected]
? The contact phone number: (+??) ?????-???
? The full name of the author: Anonymous
? The email address of the author: [email protected]
? The github account (username) of the author: anonymous
? The title of the page: My Site
? The brand name: It's Me
? The current status: Lead developer at Big Co.
? Short summary of skills: Designer, Full-stack Developer
? Office address: 1234 Street 123<br>City, State/Country
? Business Hours: Monday - Friday: 9:00 AM to 5:00 PM
? Facebook page URL: https://www.facebook.com/my_facebook_id
? Google Plus page URL: https://plus.google.com/107401799973522671886
? Twitter page URL: https://twitter.com/my_twitter_id
? LinkedIn page URL: https://www.linkedin.com/in/tam%C3%A1s-benke-02b9707/
After all the questions answered, the project will be generated. The project has the following structure:
├── dist
└── src
├── css
├── img
│ └── portfolio
├── js
├── less
├── md
├── partials
└── templates
The src folder contains the source files.
The additional vendor files will be copied from the corresponding node modules after installation.
The results will arrive into the dist folder.
The src/templates folder contains mustache templates,
that may include files from the src/partials folder.
The src/md folder may contain markdown format files,
that will be converted to HTML format and will be placed into the partials folder
so page templates can be written to envelop these contents.
The src/img folder contains the sample images, that you should replace with your own photos.
The src/less folder contains the less files, that you may customize.
Especially the is important, src/less/variables.less which contains the most relevant syling parameters.
You can do the following steps:
-
Install the npm modules required by the newly generated application:
cd new_project_name npm install -
Edit the template and the parameter files according to your needs:
- src/templates/index.html
- src/parameters.yml
-
Change the images under the
src/imgfolder. -
To create the dist package, run either:
npm run buildor
npm run watch
The build process happens via the gulp utility.
If you change the project structure, you may also modify the gulpfile.js as well.
The npm run watch uses the browser-sync utility, that starts a server too.
With this command, you can immediately view the results in a browser, that will be automatically refreshed,
in case you modify any of the source content, can be found under the src directory.
The final results will be written into the dist folder.
You can copy the whole content to the final place of deployment when you are ready.