Tried to deploy site with html + scss to gitlab and have no idea how to do that - html

Everything I've tried already didn't work for me (several sites and videos on youtube). Please, link me with another useful videos or help me understand this process. I found it much easier to deploy the site to GitHub with gh-pages, but I have problems with deploying to GitLab.
Already tried to push my project to GitLab and then CI/CD > Pipelines, where my project built successfully, then Settings > Pages and still 404 (waited more than 1 day). I have installed the ".gitlab-ci.yml" file (with basic HTML settings).
BTW, should I push the pre-built site or already converted?
Right now it is like this:
- src
- fonts
- html
- images
- js
- sass
index.html
.gitattributes
.gitignore
.gitlab-ci.yml
LICENSE
README.md
EDIT: I found solution for my specific problem. As GitLab Pages is a static hosting, before deploying sass files, you need to compile them first and only after you should deploy.
Here is my gitlab-ci.yml file.
image: alpine:latest
stages:
- compile
- deploy
compile:
stage: compile
image: node:8.15-alpine
script:
- yarn global add node-sass
- node-sass ./src/sass/main.scss ./src/css/styles.css --style compressed
only:
- master
artifacts:
paths:
- ./src/css
pages:
stage: deploy
script:
- mv src/ public
artifacts:
paths:
- public
At stage compile notice how i point to my main.scss file path which could be different for you. Also there is path for compiled file styles.css (you need to use your file name of css styles, that is mentioned in <head> section of your main html file). Check path at the artifacts line as well, so you could properly direct your files. For compilation, as you can see, i'm using Yarn (there is no need to install anything to use it). After compiling my sass file, the next stage is to deploy, which works for me as planned.
Hope it helps you as well!

To successfully host your page on Gitlab you need to move your sources to public directory and archive it. Example .gitlab-ci.yml could be:
image: alpine:latest
pages:
stage: deploy
script:
- mv src/ public
artifacts:
paths:
- public

Related

Can I render HTML on GitLab?

GitLab doesn't render HTML for me, but just display the source code:
Background: I used sphinx to generate the HTML and tried to show the doc at GitLab.
I looked at other projects' repositories, such as pandas, sphinx. They only have .rts files in the repository, and not HTML files. I guess they generate HTML for their websites but don't upload to Git.
I don't have a website and want to show doc at GitLab. Is there a way to do that? Or do I have to generate other formats (other than HTML, e.g. PDF) instead?
First of all, Git and products like GitLab and GitHub are different things. Git doesn't ever render anything; it's a version control system. It doesn't have a web interface.
Secondly, GitLab's core product isn't supposed to render anything. It's not a web host, it's a tool for hosting, sharing, and managing Git repositories. However you might want to try GitLab Pages:
GitLab Pages is a feature that allows you to publish static websites directly from a repository in GitLab.
You can use it either for personal or business websites, such as portfolios, documentation, manifestos, and business presentations. You can also attribute any license to your content.
Pages is available for free for all GitLab.com users as well as for self-managed instances (GitLab Core, Starter, Premium, and Ultimate).
GitLab Pages will publish content from the public/ directory of your repository, so you should move your files there. You will also need a .gitlab-ci.yml file in the root of your repository containing something like
image: alpine:latest
pages:
stage: deploy
script:
- echo 'Nothing to do...'
artifacts:
paths:
- public
only:
- master
(taken from the sample repository). Add that file, then commit and push. After deployment is complete, your site should be available at https://youruser.gitlab.io/yourproject.
Note that GitHub has a similar product (that works differently).
Finally,
I looked at other projects' repositories, such as pandas, sphinx. They only have .rts files in the repository, and not HTML files. I guess they generate HTML for their websites but don't upload to Git.
it's very likely that the reStructured Text files are the only source that exists, and that HTML is generated from them automatically. Sphinx this format by default. If you're interested in working from another format like Markdown or reStructured Text you may want to explore GitLab Pages' support for static site generators.
There is a super easy solution I found on this post:
Before:
https://gitlab.com/[user]/[repository]/raw/[branch]/[filename.ext]
After:
Development (throttled)
https://gl.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]
Production (CDN)
https://glcdn.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]
Another solution:
At the root of your repo, add a file called .gitlab-ci.yml containing the following lines:
pages:
script:
- mkdir .public
- cp -r * .public
- mv .public public
artifacts:
paths:
- public
Your file should then be available at
https://your-username.gitlab.io/project-name/filename.html
See this post for details: Gitlab: host and render HTML files

Missing fonts folder on jekyll deploying to netlify

When deploying jekyll project to netlify I am missing my fonts folder.
It works perfectly find when in development mode but when I tell it to run in production it seems to skip over adding my fonts folder to the _site/assets directory.
I believe it has to be something in the config but I am fairly new to jekyll and YAML. And in the code its seems to be saying to add all the assets underneath it to the build process.
Below is my _config.yml file.
copy:
# Paths to static assets that aren't (S)CSS or JavaScript
# because these are completely handled by the sass and javascript tasks
assets:
# all files below the assets dir
- "assets/**/*"
# exclusions:
- "!assets/{js,scss,css}/**/*" # js, scss and css files
- "!assets/css{,/**}" # css dir
- "!assets/js{,/**}" # js dir
- "!assets/scss{,/**}" # scss dir
- "!assets/vendor{,/**}" # vendor di
dist: "_site/assets/"
notification: "Running Copy"
Note: I work for Netlify
While I'm not sure of the fail mode here, I can tell you a couple things that would help you debug:
the easiest way to debug a build is described in this article: https://www.netlify.com/blog/2016/10/18/how-our-build-bots-build-sites/ . This lets you duplicate our build environment in a way that you can access during/after the build so you can see what is happening or has happened in more depth than our build logs
If you write into support we can set a verbose flag on your builds that does the equivalent of 'set -x' on the building shell script to show you what's being run in production, though filtering this output is quite a task for a human, it may be more useful than nothing!

gh-pages with static html can't access file when it exists

The index.html home page displays fine, however any any link will throw a 404.
The static website has folder with html in it, index link to these html with the correct path, but displays a 404.
When clicking on this link, I got a 404.
however the file is present as you can see here .
I am really banging my head on a simple html pb, which is frustrating.
I ran into this problem myself and finally discovered a simpler solution. The problem is that Jekyll ignores all files that start with _. The simple solution is to add a .nojekyll file to your docs dir.
My docs script looks like this:
"rimraf ./docs && typedoc src/ --out docs --mode modules --module commonjs --target es6 --excludePrivate && touch ./docs/.nojekyll && gh-pages -d docs -t"
touch is an npm module that creates the file and the -t flag on gh-pages is necessary to have that dot file uploaded.
Alright I though I might just answer my own question here.
Github Page doesn't allow several static HTML files.
This is not very clear to be honest on their docs, but the solution is quite simple :
Assuming your local static docs works correctly, just follow these steps :
install jekyll
gem install jekyll bundler
add a file _config.yml
in your docs or on the root of your gh-pages branch with this content:
auto: true
execute jekyll serve
And test if this works ok on the url outputed in your console
add _site in your .gitignore
push and bingo!
If you are like me using typedoc to compile typescript into nice documentation, you will run into trouble.
Because Jekyll automatically exclude from the build any files starting with _, and typedoc generates ONLY that, I wrote a simple yeoman generator that does all the replacement for you.

Excluding a directory from Jekyll watch

I'm using Jekyll 3.1.1 to generate a blog and I recently introduced a Git hook to automatically publish changes pre-push.
After introducing this hook, I have started getting the following error when I run jekyll serve:
Configuration file: /Users/egillespie/Projects/blog.givingjar.org/_config.yml
Source: /Users/egillespie/Projects/blog.givingjar.org
Destination: /Users/egillespie/Projects/blog.givingjar.org/_site
Incremental build: disabled. Enable with --incremental
Generating...
done in 0.223 seconds.
** ERROR: directory is already being watched! **
Directory: /Users/egillespie/Projects/blog.givingjar.org/node_modules/git-scripts/bin/hooks
is already being watched through: /Users/egillespie/Projects/blog.givingjar.org/node_modules/git-scripts/bin/hooks
MORE INFO: https://github.com/guard/listen/wiki/Duplicate-directory-errors
Auto-regeneration: enabled for '/Users/egillespie/Projects/blog.givingjar.org'
Configuration file: /Users/egillespie/Projects/blog.givingjar.org/_config.yml
Server address: http://127.0.0.1:4000/
Server running... press ctrl-c to stop.
What's peculiar is that I am excluding node_modules in _config.yml:
exclude:
- Gemfile
- Gemfile.lock
- LICENSE
- README.md
- package.json
- Gruntfile.js
- node_modules
node_modules is correctly being excluded from building (i.e. there is no node_modules subdirectory in _site).
I'm also excluding node_modules in .gitignore:
# project
node_modules
_site*
.sass-cache
.jekyll-metadata
# general
.DS_Store
Thumbs.db
ehthumbs.db
Based on this GitHub issue and this commit it seems like node_modules should be excluded from the watch, but it's not. I can't decipher from the documentation if there's another way to exclude files from the watch.
What is the proper way for me to exclude a directory from the watch and avoid the error described above?
The value for exclude parameter in _config.yml should be an array i.e.
exclude: ['_site', 'node_modules', ...]
Source: Jekyll Documentation - Configuration
Judging by the paths displayed in your output, you're on macOS. The jekyll-watch gem is responsible for this area (watch/rebuild features), which itself depends on the 'listen' gem. The listen gem itself uses the rb-inotify gem as a dependency, which has several issues with macOS specifically and its filesystem. This results in several bugs in regeneration behaviour that aren't not easy to fix. Background and relevant bugs:
https://github.com/guard/listen/issues/274
https://github.com/guard/listen/pull/273
You can try using the 'polling' method: https://github.com/guard/listen#listen-adapters instead, but it's much slower.
Try this to your _config.yml:
keep_files: [node]
where node is a folder to exclude from the --watch. What this will do is keeping the folder node untouched by jekyll build. Then add all files that you want to keep in the site root but not rendered by Jekyll.

Jekyll overwrites output folder and CSS generated by Compass

I am trying to use Jekyll together with Compass.
On one command line I'm running jekyll --auto and in another one compass watch.
The SASS files are located in /stylesheets and are compiled into /_site/stylesheets.
Jekyll is configured to ignore /stylesheets.
Compiling the stylesheets works fine in the beginning, but everytime I change something that makes Jekyll regenerate the site, it overwrites the whole /_site folder and /_site/stylesheets is gone. Compass doesn't regenerate it since the source SASS files haven't changed.
Is there another way to use Jekyll together with Compass?
Can I configure Jekyll to not overwrite the complete output folder but just the files that changed?
Im using Jekyll & Compass for my github page. here: https://github.com/ardianzzz/ardianzzz.github.com
Simple,
I just put the generated css folder in the root folder. Jekyll will generate the file inside _site folder.
As you can see in my repository.
Just call the CSS with the following code
<link href = "/css/screen.css" ...
bad english, sorry. :)
The issue is that Jekyll, when run, scraps all the contents of the _site directory. The way I got around this was to use rake for deployment, and then have the following in my rakefile:
task :generate => :clear do
sh 'jekyll'
sh 'compass compile'
end
I then just run:
$ rake generate
Which populates the jekyll directory, and then puts the compass files over.
A neater solution might be to make your compass -watch process (assuming that is what you are running) compile the compass to projectdir/css. When you then run jekyll it will just pull that css directory directly into _site/css and you're done, no problems (see below for dir structure).
projectdir/
css/
stylesheets/
If you put anything in _site/css and then run jekyll after it will be removed, so you either need to run compass after, or put the compass files into the css folder in the root directory, and then jekyll will just copy the files correctly.